BFC（block formatting context）块格式化上下文

一、css规范中对BFC的描述

块格式化上下文

浮动、绝对定位元素、非块盒的块容器（例如：inline-blocks，table-cells，和table-captions），和‘overflow’不为‘visible’的块盒会为它们的内容建立一个新的块格式化上下文。

 

在一个块格式化上下文中，盒在竖直方向一个接一个的放置，从包含块的顶部开始。俩个兄弟盒之间的竖直距离由‘margin’属性决定。同一个快格式化上下文中的相邻块级盒之间的竖直margin会合并。

 

在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒创立了一个新的格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）。

 

 

二、MDN对BFC的描述

一个块格式化上下文（block formatting context）是Web页面可视化CSS渲染出的一部分，它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

 

一个块级化上下文由以下之一创建：

• 根元素或其它包含它的元素
• 浮动元素（元素的 float 不为 none）
• 绝对定位元素（元素具有 position 为 absolute 或 fixed ）
• 内联块（元素具有 inline-block）
• 表格单元格（元素具有 disaply：table-cell，html表格单元格默认属性）
• 表格标题（元素具有 disaply：table-caption，html表格标题默认属性）
• 具有 overflow 且值不是 visible 的块元素
• display：flow-root
• column-span：all 应当总是会创建一个新的格式化上下文，即便具有column-span：all的元素并不被包裹在一个多列容器中。

 

一个块格式化上下文包括创建它的元素内部的所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

 

块格式化上下文对于定位（参见 float）与清除浮动（参见 clear ）很重要。定位盒清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清楚浮动只能清除同一块格式化上下文中在它前面元素的浮动。

 

三、张鑫旭对BFC的描述

http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

 

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦特性什么的，一言难尽，大家可以自行去查找，我这里不详述，免得乱了主次，总之，记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。

 

四、特性

1.父元素管子元素

例：用BFC包住浮动元素

html

<div class="father">
  <div class="son">
  </div>
</div>

css

.father{
  border: 10px solid red;
  min-height: 10px;
  display: flow-root; /*触发BFC*/
}
.son{
  background: green;
  float:left;
  width: 300px;
  height: 100px;
}

 

2.兄弟元素之间划清界限

例：用 float + div 做左右自适应布局

html

<div class="gege">gege</div>
<div class="didi">1234</div>

css

.gege{
  width: 100px;
  min-height: 600px;
  border: 3px solid red;
  float: left;
  margin-right: 20px;
}

.didi{
  min-height: 600px;
  border: 5px solid green;
  display: flow-root;
}