CSS清除浮动的三种方法

admin

CSS清除浮动的三种方法

一、使用空标签清除浮动
　　空标签可以是div标签，也可以是P标签。习惯用<div>，够简短也有很多人用<hr>，只是 需要另外为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动，并为其定义CSS代 码：clear:both。此方法的弊端在于增加了无意义的结构元素。

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

三、使用after伪对象清楚浮动
　　此种方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点：
      1）、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
      2）、content属性是必须的，但其值可以为空，有的时候content的属性值可以设为”.”，但发现为空亦是可以的。
             .clearfix:after{display:block;clear:both;content:”";visibility:hidden;height:0;} .clearfix{*zoom:1;}