1.额外标签法
通过在浮动元素末尾(同级)添加一个空的标签,例如 <div style=”clear:both”></div>
,或则其他标签br等。
<div class="clear"></div>
<style>
.clear{
clear:both;
}
</style>
2.overflow法
可以给父级添加: overflow = hidden|auto|scroll
都可以实现。
3.after伪元素
CSS初始文件可以加上:
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
然后父级标签class加上clearfix即可。
4.双伪元素
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
然后父级标签class加上clearfix即可。