清除浮动的几种方法

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;
}

具体方式大家试一试吧，初学前端希望和更多的人交流~