清除CSS浮动

清除浮动主要有两种方式，分别是clear清除浮动和BFC清除浮动，其他的你也不用去了解了。

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的一个神奇的存在，在inline-block出来之前，浮动大行其道。直到inline-block出来后，浮动也有它自己独特的使用场景。

此外，浮动带来的负效果也算是它的特征之一。

浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。

清除浮动

overflow:hidden 内容会被裁减
clear:both;
父元素设置高度
在中间一个空盒子，然后给那个空盒子clear：both
其实还有很多套路能够清除浮动，比如给浮动塌陷的元素再添加一个浮动，添加一个绝对定位……等一些方法。

clear如何清除浮动？

clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。这句话，请默念5次！
要注意了，我们是通过在别的元素上清除浮动来实现撑开高度的， 而不是在浮动元素上。
浮动元素，脱离了文档流，就算给第三个元素上下加了清除空间，也是没有任何意义的。

BFC的主要特征

✦ BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
✦ BFC可以包含浮动；通常用来解决浮动父元素高度坍塌的问题。

BFC的触发方式

我们可以给父元素添加以下属性来触发BFC：
✦ float 为 left | right
✦ overflow 为 hidden | auto | scorll
✦ display 为 table-cell | table-caption | inline-block | flex | inline-flex
✦ position 为 absolute | fixed

IE6/7不支持BFC，也不支持:after，所以IE6/7清除浮动要靠触发hasLayout，了解下就行，毕竟IE6/7已经是历史的产物了。
参考链接：
https://www.jianshu.com/p/09bd5873bed4
https://www.jianshu.com/p/a0500b54da13