彻底搞懂CSS里的BFC｜8月更文挑战

Axjy
1,248 阅读5分钟

BFC是css中比较重要的一个概念，它不但能解决很多问题，还可以解释CSS中一些诡异的地方，所以搞懂BFC对于学习css来说是很有必要的，以下从【概念】【规则】【创建】【使用】等方面对BFC做了一些总结，希望对你能有所帮助！

BFC的基本概念

BFC全称为块格式化上下文 (Block Formatting Context) ，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

BFC的通俗理解：首先BFC是一个名词，就是一个有特定规则的区域。我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。

W3C 规范对此作了详细的描述：

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

  • 在 BFC 中，盒子从顶端开始垂直的一个接一个排列，两个盒子之间的垂直间距由他们的 margin 值决定，在同一个 BFC 中，两个相邻块级盒子的垂直外边距会产生折叠。

  • 在 BFC 中，每一个盒子的左外边缘会触碰到容器的左边缘，对于从右到左的格式来说，则触碰到右边缘。即使在浮动里也是这样的（尽管一个盒子的 line boxes 会因为浮动而收缩），除非这个盒子的内部创建了一个新的 BFC（由于浮动，在这种情况下盒子本身将会变得更窄）

BFC的布局规则（原理/渲染规则）

  1. 计算BFC高度时，浮动元素也会参与计算（清除浮动）
  2. BFC的区域不会与浮动元素的box重叠。（防止浮动文字环绕）
  3. BFC在页面上是一个独立的容器，内外元素不相互影响。（解决外边距重叠问题）
  4. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

下面的使用场景会通过这些规则来处理一些实际的问题。

如何创建BFC

括号里面是一些副作用

  • 浮动元素：float:left | float:right;【会导致父元素的宽度丢失,也会导致下边的元素上移】
  • 定位元素：position:absolute | position:fixed；
  • display的一些值：display:inline-block【转为行内块会导致宽度丢失】 | display:flex | display:table | table-cell、table-caption、inline-table、inline-flex、grid、inline-grid；
  • overflow值不为visible：overflow:hidden;【将会剪切掉溢出的元素】 | overflow:auto、overflow:scroll;
  • display:flow-root【新属性，BFC创建新方式，没有任何副作用，注意浏览器兼容】

『注意』

display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell，是这个匿名的table-cell生成了BFC。

并不是任意一个元素都可以被当做BFC，只有当这个元素满足以上任意一个条件的时候，这个元素才会被当做一个BFC

BFC的使用场景

清除浮动

浮动的元素会脱离普通文档流，如下,父级容器只剩下2px的边距高度。

image.png

利用overflow: hidden给父级创建BFC之后

image.png

以上方法可以实现清楚浮动，但是还是推荐使用伪类的方式。

为什么要清除浮动? 浮动塌陷,包含块没有设置高度或者是自适应的时候、包含块就不能撑起来，变成塌陷的状态。

防止浮动文字环绕

有如下文字环绕效果：

image.png

.brother-box有部分被浮动元素所覆盖（文本信息不回被浮动元素覆盖），如果想避免元素被覆盖，可利用创建BFC的方法，如给.brother-box加overflow: hidden，则可得到以下效果

image.png

『理由』 上面的规则二：BFC的区域不会与浮动元素的box重叠

这个方法可以用来实现两列自适应布局，左边的宽度固定，右边的内容自适应宽度。

利用BFC解决边距重叠问题

根据前面的边距重合条件来看，想要解决边距重叠，只需要破坏其中的某个触发条件即可，比如创建一个BFC。

根据 BFC 的定义，两个元素只有在同一BFC 内，才有可能发生垂直外边距的重叠，包括相邻元素、嵌套元素。

===============================

要解决 margin 重叠问题，只要让它们不在同一个 BFC 内就行。

  • 对于相邻元素，只要给它们加上 BFC 的外壳，就能使它们的 margin 不重叠；
  • 对于嵌套元素，只要让父级元素触发 BFC（比如给父级加overflow：hidden)，就能使父级 margin 和当前元素的 margin 不重叠。 ===============================

在没有新建BFC时，边距重叠了，margin-bottom + margin-top，应该等于20 image.png

新建了BFC之后 image.png

上面的例子中，为了使两个正方形的外边距不重叠，就给其中一个div包裹一层container，触发BFC。

注意: 边距折叠的问题可以用 BFC 来解决，但触发 BFC 并不是解决边距折叠的充分条件，还要得到合理的运用

参考：
深入理解BFC和Margin Collapse
理解CSS布局和BFC
理解CSS中BFC
Understanding Block Formatting Contexts in CSS
知乎用户回答

小可爱看完就点个赞再走吧！🤞🤞🤞

avatar
文章
阅读
粉丝