为什么要清除浮动(也可以叫做高度塌陷)?
目的:由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动。
1.额外标签法:
<div style="clear:both;"></div>
2.老司机法:
overflow:hidden;
3.after伪元素法:
.clearafix:after{
content:"";
display:block;
height:0;
visibility:hidden;
clear:both;
}
4.双伪元素法:
.clearfix:before,.clearfix:after{
content:"";
display:block;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1; <* IE6\7专有 *>
}