BFC的作用及原理

Block Formatting context

Formatting context 是W3C CSS2.1一个概念的规范。 它决定了它的子元素将如何定位,以及如何 它 的关系和交互的元素。 最常见的 Formatting context 有Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

BFC 定义

BFC(Block formatting context)直译为"块格式化上下文"它是一个独立的渲染区域只有Block-level box参与， 它规定的内部Block-level Box如何布局,与外界无关。

BFC布局规则:

1. 内部的 Box这将是在垂直方向放置一个接一个。

2. Box在垂直方向上的距离是由margin决定, 属于同一个 BFC两个相邻Box的margin将重叠(两个盒子在不同BFC在里面,不会有重叠)。

3. 每个 box接触的左侧包含块包含块的左边(从左到右格式化,否则相反);这是真的,即使有一个浮点数。

4. BFC这个地区不会匹配float box重叠(两栏布局)。

5. BFC页面上它是一个孤立的独立的容器,容器内的子元素将不影响外部元素;反过来也是如此。

6. 计算 BFC在计算高度时,浮动元素也参与计算。

哪些元素默认BFC 哪些属性可以使一个元素 BFC(一个单独的容器内的页面)

1. 根元素-html

2. float属性不为none

3. position为absolute或fixed

4. display为inline-block, table-cell, table-caption, flex, inline-flex

5.overflow不为visible （ hidden）

BFC应用程序(即添加overflow:hidden可以解决的问题)

1. 自适应两列布局

2. 明确内部浮动

3. 防止垂直 margin 重叠

4． 添加子元素 margin-top父元素将会在一起