轻谈BFC

BFC 定义

CSS2.1的定义 Block formatting contexts

9.4.1 Block formatting contexts

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

用google 翻译

浮动，绝对定位的元素，块容器（如嵌入块，表格单元格和表格标题）不是块框，以及“溢出”而不是“可见”的块框（除了已经传播的值到视口）为其内容建立新的块格式上下文。

在块格式上下文中，框从一个包含块的顶部开始，一个接一个地垂直排列。两个兄弟框之间的垂直距离由“边距”属性决定。块格式化上下文中相邻块级别框之间的垂直边距折叠。

在块格式化上下文中，每个框的左外边缘都与包含块的左边缘接触（用于从右到左格式化，右边缘接触）。即使在有浮动的情况下也是如此（虽然箱子的线框可能因为浮动而缩小），除非箱子建立了新的块格式上下文（在这种情况下，箱子本身可能由于浮动而变窄）。

从上面的话我们可以得出几点BFC的产生条件，特性。

BFC本身就可以理解为一个具有特性的块级格式化上下文。除了BFC,IFC, CSS3 中还增加了 GFC 和 FFC.

BFC可以包含浮动元素这个特性，可以用来清除浮动，当然可能导致容器长度缩短。当然目前解决浮动的最好方法应该是after的方式。

IE6、7内有个hasLayout的概念，当元素的hasLayout属性值为true的时候会达到和BFC类似的效果。

产生条件 OFDP(overflow,float,display, position)

1. overflow， 除了 visible 以外的值（hidden，auto，scroll）
2. floadt，浮动元素，float 除 none 以外的值
3. display，为以下其中之一的值 inline-blocks，table-cells，table-captions， flex, 或者 inline-flex（display：table可以生成BFC，原因在于Table会默认生成一个匿名的table-cell，这个table-cell生成了BFC）
4. position，绝对定位元素，position（absolute，fixed）

BFC特性

1. 在块格式上下文中，框从一个包含块的顶部开始，一个接一个地垂直排列
2. 块格式化上下文中相邻块级别框之间的垂直边距折叠
3. 在块格式化上下文中，每个框的左外边缘都与包含块的左边缘接触（用于从右到左格式化，右边缘接触）。即使在有浮动的情况下也是如此（虽然箱子的线框可能因为浮动而缩小），除非箱子建立了新的块格式上下文（在这种情况下，箱子本身可能由于浮动而变窄）。
   
   其他抄过来的特性
4. BFC的区域不会与float box重叠。实用场景是文字环绕。结合第三条，调整文字和图片的距离，应该设置图片的margin更合适
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。解决margin折叠
6. 计算BFC的高度时，浮动元素也参与计算。 这个用来解决浮动导致的高度塌陷问题。

collapsing-margins(边距折叠)

www.w3.org里面有介绍的collapsing-margins

我这接直接借用别人的翻译

折叠的结果：

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
• 两个外边距一正一负时，折叠结果是两者的相加的和。

产生折叠的必备条件：margin必须是邻接的!

而根据w3c规范，两个margin是邻接的必须满足以下条件：

• 必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
• 没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
• 都属于垂直方向上相邻的外边距，可以是下面任意一种情况
• 元素的margin-top与其第一个常规文档流的子元素的margin-top
• 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
  
  height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
  
  高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

以上的条件意味着下列的规则：

• 创建了新的BFC的元素（例如浮动元素或者'overflow'值为'visible'以外的元素）与它的子元素的外边距不会折叠
• 浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）
• 绝对定位元素不与任何元素的外边距产生折叠
• inline-block元素不与任何元素的外边距产生折叠
• 一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。
• 一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠，条件为父元素不包含 padding 和 border ，子元素不包含 clearance。
• 一个 'height' 为 'auto' 并且 'min-height' 为 '0'的常规文档流元素的 margin-bottom 会与其最后一个常规文档流子元素的 margin-bottom 折叠，条件为父元素不包含 padding 和 border ，子元素的 margin-bottom 不与包含 clearance 的 margin-top 折叠。
• 一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 'height' 为 0 或 'auto'， 'min-height' 为 '0'，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 会折叠。

case研究

• BFC-文字环绕

1. P标签产生BFC,就不受外界浮动影响
2. 调整图片和文字的距离，两种方式，p标签的margin-left（足够大），img的margin-right
   

   BFC-文字环绕

• BFC-解决margin折叠

1. .outer,.wrap,第一个.item的margin-top都是10，最后距离顶部距离也是10，说名什么，折叠后再折叠。
2. .last产生BFC,让自己和子元素margin不折叠。
   

   BFC-解决margin折叠

• BFC 三栏布局
  
  BFC 区域，不会与浮动元素重叠。因此我们可以利用这一点来实现3列布局。

  三栏布局BFC

• Margin-自身的 margin-top 和 margin-bottom折叠

  Margin-自身的 margin-top 和 margin-bottom折叠

• Margin-margin-top和margin-bottom折叠

  Margin-margin-top和margin-bottom

• Margin-margin-top折叠

  Margin-margin-top折叠

Block formatting contexts

collapsing-margins

CSS 属性flow-root

display:flow-root|Can I Use

浅析BFC及其作用

理解CSS中BFC

前端精选文摘：BFC 神奇背后的原理

CSS清浮动处理（Clear与BFC）

CSS深入理解流体特性和BFC特性下多栏自适应布局