清除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