使用浮动造成的BUG：
使用浮动前：（子节点是将父节点撑开了）
代码如下
<div class="box">
<div class="d1">1</div>
<div class="d2">2</div>
</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;
}
首先说明现象：我没有给父节点设置高度，在给子div设置float:left后，出现如下BUG:
1.父节点的margin属性失效 2.子节点没有将父节点撑开
那么，我们该怎么解决这样由浮动造成的bug呢？
三种方法：
一、:after的3行代码（最高大上的方法,写情书的感觉哟）
原理：利用:after和:before在元素内插入两个元素块（其实就是在节点本身构造出两个存在于Render Tree的节点），从而达到清除浮动的效果。
代码如下:（有点三行情书的意思。。嘿嘿）
.box:after{
clear: both;
content: '';
display: block;
}
清除后效果:(实现父节点被撑开,子节点浮动效果)
二、添加新的节点，使用clear:both方法（跟:after大同小异，实现上略有区别）
先看代码：
<div class="box">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="clc"></div>
</div>
.clc{
clear: both;
}
咱们就在父节点中增加一个节点，然后在该节点中设置clear:both属性，就可以清除浮动了。
三、在父节点上设置一个新类名，然后在类名css中设置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;
}
这样也可以清除浮动，其原理是使用overflow属性来清除浮动，overflow有三个值：auto| hidden | visible，我们可以使用 hidden和
auto来清除浮动，但绝不可以使用 visible 清除浮动，使用这个值达不到效果。
浮动产生Bug原因：
当一个内层元素是浮动的时候，如果没有关闭浮动，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了！
总结：今天在这里总结了三种比较常见的清除浮动的方法，对于浏览器来说，也并不是每种都可以很好的兼容，所以各位在使用这三种方法
的时候还是看实际效果为主。