CSS之清除浮动的几种常用方法小结

1. 添加额外标签

  在浮动元素末尾添加一个空的标签例如

<div style=”clear:both”></div>

，其他标签br等亦可。

<div class="warp" id="float">
<h3>添加额外标签</h3>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<div style="clear:both;"></div>
</div>

优点：通俗易懂，容易掌握

缺点：：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离。

2. 父元素设置 overflow：hidden

  通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；

<div class="warp" id="float" style="overflow:hidden; *zoom:1;">
<h2>父元素设置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>

优点：不存在结构和语义化问题，代码量极少

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；

3. 父元素设置 overflow：auto 属性

  通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；

<div class="warp" id="float" style="overflow:auto; *zoom:1;">
<h2>父元素设置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>

优点：不存在结构和语义化问题，代码量极少

缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等。

4. 使用:after 伪元素

  由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

.clearfix:after {content:"."; display:block; height:0; overflow:hidden; clear:both; }

.clearfix { _zoom:1; }

或者简短点的：

.clearfix:after{
content:'.';
display:table,
clear:both
}

优点：结构和语义化完全正确,代码量居中

缺点：复用方式不当会造成代码量增加

5. 父级div定义height

优点：简单，代码少，容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题