清除浮动

虽然现在有了flex这么方便的东西，但是有的地方还是可以用浮动来写。
本文就总结一些常用的去除浮动的方法。

什么是浮动

float:left;或right。可以让元素脱离标准文档流，向左或向右贴靠。传言浮动刚开始设计出来是为了让文字围绕图片环绕显示，后面被开发者们用来布局。

为什么要清除浮动

当一个父盒子内部的子元素全部浮动起来的时候，子元素就脱离了标准文档流。父盒子的高度就会塌陷，影响到后面的布局。

父盒子高度塌陷
影响到后面的布局

怎么清除浮动

1. 给父元素设置高度

.box{
    height:300px;
}

这个是最那啥的办法了，你高度不是塌陷了吗？那我就直接给你一个高度呗....反正我不会这么玩。

2. 给父元素设置溢出隐藏

.box{
    overflow:hidden;
}

我们给父盒子设置一个overflow:hidden；就触发了父盒子的BFC（块级格式化上下文），这时候就算子元素都浮动了，父盒子也可以将它们包裹起来。这个在偷懒的时候用的挺多的。

3. 给父元素设置clearfix伪元素

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

这也是一个很常用的方法，我们事先在CSS中声明一个.clearfix 的伪元素，当父盒子需要清除浮动时，我们就把这个clearfix类名加到它的class中去。

其原理就是在父盒子内部结尾的位置加了一个假的子元素，这个子元素是清除浮动的。

4. 内墙法

<div class="box">
    <div>一只棕色的狗</div>
    <div>一只棕色的狗</div>
    <div>一只棕色的狗</div>
    
    <div class="clear-box"></div>
</div>

CSS:
.clear-box{
    clear:both;
}

内墙法就是在父盒子内部那些浮动的子元素结束的地方，手动加一个空标签，来设置清除浮动。是不是有点像上面一种方法？反正我不是很喜欢用内墙。

5. 给父盒子也加一个浮动

.box{
    float:left;
}

float的值只要不为none，就会触发BFC。触发BFC以后父元素就可以包住浮动的子元素了。但是谁会为了清除子元素浮动来给父盒子加一个浮动呢...不推荐使用。

结尾

触发BFC就可以让父盒子包住浮动的子元素，意思就是只要触发了BFC就可以清除浮动了，触发BFC的方法除了上述的，还有一下情况：

根元素body
浮动元素 float不为none
绝对定位元素，position为absolute或者fixed
display为inline-block、table-cells、flex
overflow除了visible以外的值（hidden、auto、scroll）

只要有上述一种情况就可以触发BFC

其实现在有了flex这么好用的方法，还是推荐使用flex吧，因为这个更爽。

清除浮动方式（持续更新）