清除浮动的方法

浮动 Float 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间，这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是，由于浮动特性，容器如果没有明确设定高度，会依照普通流内元素高度设置，这样就会导致脱离普通流的浮动元素溢出容器，影响其后元素布局。

清除浮动是面试中经常遇到的问题，总结一下清除浮动的方法：

设置原型，一个父元素，两个子元素左浮动

<div class="parent">parent
    <div class="son1">son1 float:left</div>
    <div class="son2">son2 float:left</div>
</div>
.parent {
    background: #999999;
}
.son1,.son2{
    background: #f5e327;
    float: left;
    width: 100px;
    height: 100px;

}
.son2{
    background: #ff1810;
}

清除浮动实现目的使父元素的高度被子元素撑满。

1、clear: both

添加 空div标签，放在父元素最后一个子元素位置，设置样式为clear：both。

<div class="parent">parent
    <div class="son1">son1 float:left</div>
    <div class="son2">son2 float:left</div>
    <div class="clear"></div>
</div>
.clear{
    clear: both;
}

2、设置父元素高度

如果子元素高度确定，则设置父元素高度等于子元素高度，则看起来父元素被子元素撑满，如果子元素高度不确定，这个方法不合适。

.parent {
    background: #999999;
    height: 100px;
}

3、使用BFC

BFC有一个特点：计算BFC的高度时，浮动元素也参与计算，我们可以将父元素设置overflow属性形成BFC，这样浮动元素的高度也会参与计算，父元素的高度就会被浮动元素的高度撑满。

.parent {
    background: #999999;
    overflow: auto;  
   /* overflow: hidden;*/  或者hidden
}

效果和上图一样。

4、万能清除法after伪类清浮动

利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在父元素最后插入一个div.clear标签，而伪类清除法利用父元素的伪类在元素内部增加一个类似于div.clear的效果，没有在原来HTML文件中操作DOM。

这是目前最主流的清除浮动的方法，推荐优先使用。

.parent:after{
    content: "";
    display: block;
    clear: both;
}

效果同上

5、使用table清除浮动

.parent {
    background: #999999;
    display: table;
}

效果如下

6、以浮制浮

将父级同样设置为浮动，能让子元素撑满整个父元素，但是再整体布局中，父元素也变成浮动了并不是我们想要的，除非父元素已经确定位置。

.parent {
    background: #999999;
    float: left;
}