网站巧用clearboth.docx

巧用clear:both
我们在制作网页中用div+css或者称xhtml+css都会遇到一些很诡异的情况，明明布局正确，但是整个画面却混乱起来了，有时候在IE6下看的很正常的，到ie7或者火狐下看时，就一片混乱了，无论怎么计算，就是不能将排版改正过来。其实，这一切都是浮动搞得鬼，也就是css中的float，要解决情况，就需要使用clear:both了。

CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。
程序代码:
这个是第1列，这个是第2列，ear: both;
}

然后使用这个是第1列，这个是第2列，这个是第3列。这个是第1列，这个是第2列，第三段内容红色和黄色两个色块内容，同时在蓝色块以下是第三段文本。

不过FF的效果可不是这样的。我们不能单单想在下一层清除就能完成我们的工作，我们必须在浮动元素所在标签闭合之前及时进行“清除”。
程序代码

#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600; float: left;width: 130px;}
#container {float: right;width: 420px;backg</p><p style='padding:5px 0px;'>7、round-color: #FFFF33;}
.clear {clear: both;}

height:1px;
margin-top:-1px;
overflow:hidden;
}
程序代码

#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</p><p style='height:0px;padding:0;overflow:hidden'>9、height:1px;margin-top:-1px;overflow:hidden;}

both {overflow:auto;zoom:1;}
Posted on 2012-05-19 12:19 沁园春 阅读(1468) 评论(0) 编辑 收藏
常用的清除浮动的方法有以下三种:
此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。

<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;h</p><p style='height:0px;padding:0;overflow:hidden'>11、eight:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>

hr>，只是需要另外 为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代 码：clear:both。此方法的弊端在于增加了无意义的结构元素。
对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的 做法。至于使用元素还是空蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
–>