清除浮动的一些方法

Posted 2020-09-25

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

一：在当前元素的父级添加浮动（这种方法存在一定的避免。父级的也需要清理浮动，但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失效等问题。