CSS清除浮动float方法总结

使用浮动造成的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原因：

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

总结：今天在这里总结了三种比较常见的清除浮动的方法，对于浏览器来说，也并不是每种都可以很好的兼容，所以各位在使用这三种方法

的时候还是看实际效果为主。