【修真院】BFC及其如何工作

分享人：姜学倩

1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论

一.背景介绍

什么是FC?

FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

二.知识剖析

官方文档对于BFC的定义：

MDN解释：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

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

下列方式会创建块格式化上下文：

根元素或包含根元素的元素
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

创建了块格式化上下文的元素中的所有内容都会被包含到该BFC中。

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

css规范：

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).

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。

在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。

在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。

三.常见问题 || 四.解决方案 || 五.编码实战

1.BFC特性及应用？

（1）家教严格--包裹浮动

</div>

css部分

.father{
border:5px solid #ffa600;
}
.son{
height:100px;
background:#ddf045;
float:left;
width:300px;
}

应用BFC后：

（2）减少隔阂--同一个 BFC 下相邻两个盒子外边距会发生折叠（合并）

</div>

CSS部分

.father{
border:3px solid #ffa500;
}
.bigbrother{
height:100px;
background:green;
margin:20px;
}
.smallbrother{
height:20px;
background:#34f;
margin:20px;

}

（3）化敌为友--自适应两列布局

CSS部分

.bigbrother{
height:100px;
background:green;
width:400px;
float:left;
}
.smallbrother{
height:200px;
background:#34f;
overflow:hidden;

}

2.如何触发BFC？

1. body 根元素
2.浮动元素：float 除 none 以外的值.
3.绝对定位元素：position (absolute、fixed)
4.display 为 inline-block、table-cells、flex、flow-root

5.overflow 除了 visible 以外的值 (hidden、auto、scroll)

六.扩展思考

什么是IFC？

IFC(Inline Formatting Contexts)直译为"内联格式化上下文"
IFC一般有什么用呢？
水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

七.参考文献

参考资料：https://xiedaimala.com/tasks/4cdc74ef-b8b2-4cbd-aa4e-7a8ee7ad3a16#/ 为什么这么多人讲不清楚 BFC

参考资料：https://www.jianshu.com/p/e75f351e11f8 css3中的BFC,IFC,GFC和FFC
参考资料：https://zhuanlan.zhihu.com/p/25321647 10 分钟理解 BFC 原理

八.更多讨论

css3时代下，BFC何去何从？

【修真院】BFC及其如何工作

猜你喜欢