怎样清除浮动

1、为什么要清除浮动

如果一个块级元素没有设置固定的高度，那么它的高度就是由里面的子元素来撑开的，如果子元素全部浮动，子元素会脱离了标准的文档流，会导致父元素没有高度。

2、清除子元素浮动的方法

方案一：

/* 清除浮动 */
.clearfix { *zoom:1;}/*IE6 7 只要触发layout即可*/
.clearfix:after { content:"."; clear:both; height:0; font-size:0; line-height:0; display:block; }

方案二：

/* 清除浮动 */
.clearfix:before, .clearfix:after { content:""; display:table; }
.clearfix:after { clear:both; }
.clearfix {  *zoom:1; }

3、应用：

<div class="clearfix">
    <div style="float:left;">11<div>
    <div style="float:left;">22<div>
    <div style="float:left;">33<div>
    <div style="float:left;">44<div>
</div>