【修真院】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块格式化上下文

浮点数，绝对定位的元素，阻止不是块框的容器（例如内联块，表格单元格和表格标题），以及除“可见”之外的“溢出”的块框（除非该值已被传播）到视口）为其内容建立新的块格式化上下文。

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

在块格式化上下文中，每个框的左外边缘触摸包含块的左边缘（从右到左格式化，右边缘触摸）。即使存在浮点数也是如此（尽管盒子的线框可能因浮动而缩小），除非盒子建立新的块格式化上下文（在这种情况下，盒子本身可能因浮动而变窄）。

 

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

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

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

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

1.BFC特性及应用？

 

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

 <div class =“father”>
   <div class =“son”> </ div>

</ DIV>

CSS部分

.father {
  border：5px solid＃ffa600;
}
。{
  高度：100px;
  背景：＃ddf045;
  向左飘浮;
  宽度：300像素;
}

应用BFC后：

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

<div class =“father”>
  <div class =“bigbrother”> </ div>
  <div class =“smallbrother”> </ div>

</ DIV>

CSS部分

.father {
  border：3px solid＃ffa500;
}
.bigbrother {
  height：100px;
  背景：绿色;
  保证金：20像素;
}
.smallbrother {
  height：20px;
  背景：＃34F;
  保证金：20像素;  

}

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

 <div class =“bigbrother”> </ div>

  <div class =“smallbrother”> </ div>

CSS部分

.bigbrother {
  身高：100px;
  背景：绿色;
  宽度：400像素;
  向左飘浮;
}
.smallbrother {
  height：200px;
  背景：＃34F;
  溢出：隐藏;

}

 

2.如何触发BFC？

1. body根元素
2.浮动元素：float除无以外的值。
3.绝对定位元素：position（绝对，固定）
4.display为内联块，表格单元格，flex，flow-root

 5.overflow除了可见以外的值（隐藏，自动，滚动）

 

六，扩展思考

什么是IFC？

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

七。参考文献

 参考资料：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何去何从？