1.为何要清除浮动
下面看一个非常简单的实例，为方便
.box {
background-color:#0000FF;
}
.float-box {
width:200px;
height:200px;
background-color:#FF0000;
}
<div class="box">
<div class="float-box"></div>
</div>
效果如下图，蓝色父类的高度随着子元素高度变化而变化
clearfix1.jpg
当在子元素上添加float后如下图
.float-box {
width:200px;
height:200px;
background-color:#FF0000;
float:left; /* 添加浮动 */
}
box的高度变成0了，可能有的同学会想，变就变呗能有什么影响，那么接下来添加一个box的同级元素p
.box {
background-color:#0000FF;
}
.float-box {
width:200px;
height:200px;
background-color:#FF0000;
float:left;
}
p {
background-color: #FFDD55;
}
<div class="box">
<div class="float-box"></div>
</div>
<p>
我上来咯~
</p>
结果会变成下图所示,可以看到正常我们肯定是希望box在上而p在下的布局，但是由于box内的子元素浮动后导致box的hight为0，导致p标签直接跑到了上边
clearfix3.jpg
总结：回到标题再来说说为何要清除浮动,清除浮动可以保证父元素(box)高度不被子元素(float-box)的浮动影响高度(父元素高度不定的情况下它的height是取决于子元素的),让子元素回到父元素,从而保证在布局时不影响同级元素(p)
2.清除浮动的几种方式
1. 在高度塌陷标签内部最后添加一个标签
<div class="box">
<div class="float-box"></div>
<div style="clear:both"></div> <!-- 可以清除浮动,无意义空标签，不建议使用 -->
</div>
2. 高度塌陷元素添加overflow属性(auto或hidden)
3. 父元素本身也添加浮动
4. 使用css伪元素
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1; /* ie6 ie7 haslayout */
}
优化后的代码
.clearfix:after {
clear: both;
content: '';
display: table;
}
具体方式大家试一试吧，初学前端希望和更多的人交流~
