overflow:hidden清除浮动原理

overflow:hidden清除浮动原理

BFC （Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body)一个块级上下文，但是如果一个块级元素 设置了float:left，overflow:hidden或position:absolute样式，就会为这个块级元素生成一个独立的块圾上下文，就像在window全局作用域内，声明了一个function就会生成 一个独立的作用域一样，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版完全独立隔绝。

独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。

该方法清楚浮动的本意

overflow：hidden的意思是超出部分去掉，如果父元素height为auto，内部元素浮动，势必会将内部元素全部隐藏，故计算出内部浮动高度顺便清除浮动。

如何触发BFC

根元素

loat的值不为none

overflow的值不为visible

display的值为inline-block、table-cell、table-caption

position的值为absolute或fixed

display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC