BFC渲染机制

　　BFC(block formatting context):块级格式化上下文（实际就是一个隔离罩）

　　W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

　　渲染规则：

　　　　规则很重要，要记住。

　　　　规则1：在BFC中元素垂直方向上的margin会重叠。

　　　　规则2：BFC内相当于一个独立的世界，里面的元素无论怎么变化都不会影响外面。

　　　　规则3：BFC内元素不会与浮动元素发生重叠（这是BFC解决浮动的根本原因）。

　　　　规则4：计算高度时，浮动元素也会参与（也就是overflow:hidden能清浮动的原因）。

 

　　创建BFC:

　　　　

• body 根元素(html)
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)