BFC（块级 格式化上下文）的理解

 

 

本文转载（http://www.javashuo.com/article/p-mbnnjsqn-cx.html）

一.BFC的概念

 

---

1.规范解释

　　块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程当中生成块级盒子的区域，也是浮动元素与其余元素的交互限定区域。

2.通俗解释：

• BFC 是一个独立的布局环境,能够理解为一个容器,在这个容器中按照必定规则进行物品摆放,而且不会影响其它环境中的物品。
• 若是一个元素符合触发BFC的条件，则该元素中的布局不受外部影响。
• 浮动元素会建立BFC，因此浮动元素内部子元素主要受浮动元素影响，两个浮动元素之间是互不影响的。

二.建立BFC

 

---

 

1. 根元素或包含根元素的元素
2. 浮动元素 float ＝ left | right 或 inherit（≠ none）
3. 绝对定位元素 position ＝ absolute 或 fixed
4. display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
5. overflow ＝ hidden | auto 或 scroll (≠ visible)

三.BFC的特性

---

 

1. BFC 是一个独立的容器，容器内子元素不会影响容器外的元素。反之亦如此。
2. BFC盒子之间垂直的间距是由 margin 决定的。
3. 在同一个 BFC 中，两个相邻的块级盒子的垂直外边距会发生重叠。
4. BFC 区域不会和 float box 发生重叠。
5. BFC 可以识别并包含浮动元素，当计算其区域的高度时，浮动元素也能够参与计算了。

四.BFC的做用

---

1.包含浮动元素 （清除浮动）

• 浮动元素会脱离文档流(绝对定位元素也会脱离文档流)，致使没法计算准确的高度，这种问题称为高度塌陷。
• 解决高度塌陷问题的前提是可以识别并包含浮动元素，也就是清除浮动。

问题举例：如上左图所示，容器（container）没有高度或者 height = auto ,而且其子元素（sibling）是浮动元素，因此该容器的高度是不会被撑开的，即高度塌陷。

解决方法：在容器（container）中建立 BFC。

HTML：

1 <div class="container">
2         <div class="Sibling"></div>
3         <div class="Sibling"></div>
4 </div>

CSS：

1 .container { 
2         overflow: hidden; /* creates block formatting context */ 
3         background-color: green; 
4 } 
5 .container .Sibling { 
6         float: left; 
7         margin: 10px;
8         background-color: lightgreen;  
9 }

特别提示：

• 经过 overflow:hidden 建立 BFC，当然能够解决高度塌陷的问题，可是大范围应用在布局上确定不是最合适的，毕竟 overflow:hidden 会形成溢出隐藏的问题，尤为是与 JS 的交互效果会有影响。
• 咱们能够使用 clearfix 实现清除浮动，这里就很少介绍了。想了解 清楚浮动请参看另外一篇文章（http://www.javashuo.com/article/p-tfnxzaiy-dh.html）

2.BFC中的元素会产生外边距折叠 

　　相邻的两个盒子（多是兄弟关系也多是祖先关系）的垂直边距相遇时， 它们将造成一个外边距。这个外边距的高度等于两个发生折叠的外边距的高度中的较大者。

HTML

1 <div class="Container"> 
2     <p>Sibling 1</p> 
3     <p>Sibling 2</p> 
4 </div>

CSS

.Container { 
    background-color: red; 
    overflow: hidden; /* creates a block formatting context */ 
} 
p { 
    background-color: lightgreen; 
    margin: 10px 0; 
}

如上图所示：红色盒子（Container）中包含两个绿色的兄弟元素（P），而且红色盒子设置 overflow: hidden; 则一个BFC 已经被建立,即致使外边距折叠。

理论上两个兄弟元素之间的边距应该是两个元素的边距之和（20px），但实际是 10px。这就是外边距折叠致使的。

2.1 折叠外边距的取值

• 两个相邻的外边距都是 正数 时，折叠外边距是二者中较大的值。
• 两个相邻的外边距都是 负数 时，折叠外边距是二者中绝对值较大的值。
• 两个相邻的外边距是 一正一负 时，折叠外边距是二者相加的和。

2.2 折叠外边距产生的条件是margin必须相邻

3.避免外边距折叠 

　　这一听起来可能有些困惑，由于咱们在前面讨论了 BFC 致使外边距折叠的问题。但咱们必须记住的是外边距折叠（Margin collapsing）只会发生在属于同一BFC的块级元素之间。若是它们属于不一样的 BFC，它们之间的外边距则不会折叠。因此经过建立一个不一样的 BFC ，就能够避免外边距折叠。

修改前面的例子并添加第三个兄弟元素，CSS不变。

HTML：

1 <div class="Container"> 
2         <p>Sibling 1</p> 
3         <p>Sibling 2</p> 
4         <p>Sibling 3</p> 
5 </div>

结果不会改变，还会折叠外边距，三个兄弟元素（P）将会以垂直距离为 10px 的距离分开。缘由是三个兄弟元素都属于同一个 BFC。

建立一个不一样的 BFC ，就能够避免外边距折叠。

HTML：

1 <div class="Container"> 
2         <p>Sibling 1</p> 
3         <p>Sibling 2</p> 
4         <div class="newBFC"> 
5             <p>Sibling 3</p> 
6         </div> 
7 </div>

CSS：

 1 .Container { 
 2     background-color: red; 
 3     overflow: hidden; /* creates a block formatting context */ 
 4 } 
 5 p { 
 6      background-color: lightgreen; 
 7      margin: 10px 0; 
 8 }
 9 .newBFC { 
 10     overflow: hidden; /* creates new block formatting context */ 
 11 }

当第二和第三个兄弟元素属于不一样的 BFC 时，它们之间就没有外边距折叠。