html不清除浮动不能给背景,Html+CSS CSS(CSS3) 3种清除浮动的方法

*{margin:0;padding:0;}body{font:36px bold; color:#F00; edui-filter-align-center }#layout{background:#FF9;}#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}.clr{clear:both;}–>LeftRight

二、使用overflow属性

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6。

*{margin:0;padding:0;}body{font:36px bold; color:#F00; edui-filter-align-center }#layout{background:#FF9;overflow:auto;zoom:1;}#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}–>LeftRight

三、使用after伪对象清楚浮动

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

*{margin:0;padding:0;}body{font:36px bold; color:#F00; edui-filter-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;}–>LeftRight

此三种方法各有利弊，使用时应择优选择，比较之下第二种方法更为可取。