清除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之后的效果