清除浮动的几种常见方法

Posted on 2010-07-26 21:34 Kamfper 阅读(202) 评论(0) 编辑收藏举报

1.使用空标签清除浮动。具体方法：在所有浮动元素后面添加一个空标签如<div>、<p>等等（理论上这个空标签可以是任何HTML标签），给这个空标签添加CSS属性：clear:both。
2.使用overflow属性。具体做法：给浮动元素的父元素添加CSS属性：overflow:hidden。对于IE6浏览，可以添加：zoom:1。此方法的好处是无需添加无意义的标签，这点优于方法1。
3.使用after伪对象清除浮动。具体做法：例如浮动元素的父元素是X，可以在CSS中添加如下伪对象：X:after{display:block;clear:both;content:"";visibility:hidden;height:0;}。说明：content属性必须，值为空；height必须为0，否则X的高度会出现偏差。