BFC以及overflow:hidden清楚浮动的原理

BFC

概念： 单独的块级渲染作用域
应用： BFC是可以显式的调出来，满足以下几种情况就可以出现BFC

• position为fixed或absolute，因为这两种布局会脱离文档流
• float为上下左右浮动的
• flex布局 display:flex
• display:inline-block
• overflow不为visible =>还不是很清楚这个属性

注意！！！！
一个BFC内的元素会引起上下margin值重叠，使用overflow:hidden可以避免margin值，因为当overflow为hidden时，这两个元素就不再是一个BFC了，自然就避免了margin值重叠

而浮动元素是float不为none的属性，给其设置一个overflow:hidden即可让其成为BFC，BFC在计算高度的时候，是包含浮动元素的，故可以清楚浮动。