首页 > 代码库 > 清除浮动的一些方法

清除浮动的一些方法

今天为大家分享一些清除浮动的一些方法:

一:在当前元素的父级添加浮动(这种方法存在一定的避免。父级的也需要清理浮动,但margin: 0 auto失效);

二:在当前元素的父级添加{display:inline-block;}这种方法虽然避免了父级的父级添加浮动,但是仍存在 margin:0 auto失效的情况,并且display:inline-block在IE6下会出现兼容性问题。

三:给父级设置高度,但是这种方法的扩展性不好

四:在浮动元素的后边添加

<div  class="clear"></div>  <style>.clear{font-size:0;height:0px;overflow:hidden;clear:both;}</style>

font-size:0;height:0px;overflow:hidden;解决ie6下的最小高度问题。

五:使用<br clear="all"/>  标签

六:使用after伪类标签 在父级中使用:after{content: "";display: block;clear: both;}  并在父类的样式中设置zoom:1(解决IE6下的兼容性问题)

七:使用绝对定位和固定定位,但是固定定位在IE6下不支持,另外使用绝对定位和固定定位也存在margin: 0 auto失效等问题。

 

清除浮动的一些方法