BFC 入门

BFC ？港真，KFC 我倒是听过，BFC 是个什么东西，赶紧翻阅各种资料了解它背后的奥秘。以下为自己的总结：

什么是 BFC

BFC，是“Block Formatting Context”的简称，译为“块级格式化上下文”。它是页面中独立的一个渲染区域，属于正常的文档流。BFC 内部布局规则如下：

• 内部的 box 自上而下，一个挨着一个排列。
• 内部相邻的两个 box 的垂直距离由 margin 属性决定，但是会发生 margin 重叠的情况。
• 每个 box 的 margin box 的左侧与 BFC 的 border box 左侧相挨着，(PS：若是从右往左的排列顺序，那么就是右侧始终挨着)，即使 box 浮动了也是如此。
• BFC 区域不会与 float box 重叠，但是会包含 float box 。
• 不同 BFC 区域中的 box 互不影响。

如何产生

• 根元素
• float 属性不为 none
• position 为 absolute 或 fixed
• display 为 inline-block， table-cell，table-caption， flex， inline-flex
• overflow 不为 visible