清除float的三种方式

使用浮动前：（子节点是将父节点撑开了）

使用浮动造成的BUG：

代码：

1 <div class="box">
2     <div class="d1">1</div>
3     <div class="d2">2</div>
4 </div> 

.box{
    border: 1px solid black；
    margin: 50px auto;
    padding: 50px;
    color: #fff;
}
.d1{
    float: left;
    background: purple;
    width: 100px;
    height: 100px;
}
.d2{
    float: left;
    background: #9c3;
    width: 100px;
    height: 100px;
}

浮动bug产生原因：

　　当一个内层元素是浮动的时候，如果没有关闭浮动，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了！

解决方法

1.clear:both

<div class="box">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="clc"></div>
</div>

.clc{
    clear: both;
}

2.overflow:auto

<div class="box over-flow">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <!-- <div class="clc"></div> -->
</div> 

.over-flow{
    overflow: auto;
}

3.:after的三行代码

.box:after{
    clear: both;
    content: '';
    display: block;
}

清除float之后的效果