佳通微博

首页|搜索|评论|底部|登录

演示-链接演示-单页演示-书签演示-语法演示-杂烩演示-美图栏目演示演示-影音源码下载立即购买申请试用使用手册系统更新

客串一下：[微博内容]
不过也有不赞同意见是，

可以不写，直接在下层清除就可以了。比如本来好好的
这个是第1列，

这个是第2列，

这个是第3列。

非要整成
这个是第1列，

这个是第2列，

这个是第3列。

这点看来，确实不需要写。
2012-10-20 11:59:33

客串一下：[微博内容]
不过很显然，我们在网页设计时还有一种很普遍的情况：

#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}

第一段内容第一段内容第一段内容

第二段内容第二段内容第二段内容

第三段内容

该页面测试在IE下效果正合所要：蓝色块内部有红色和黄色两个色块内容，同时在蓝色块以下是第三段文本。

2012-10-20 11:58:04

客串一下：[微博内容]
不过FF的效果可不是这样的。我们不能单单想在下一层清除就能完成我们的工作，我们必须在浮动元素所在标签闭合之前及时进行“清除”。

#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;}

第一段内容第一段内容第一段内容

第二段内容第二段内容第二段内容

第三段内容

对于因多加的标签会引起IE和FF高度变化，通过如下方法解决：
.clear {
     clear: both;
     height:1px;
     margin-top:-1px;
     overflow:hidden;
}
2012-10-20 11:57:06

[1/1]1

回顶部