CSS中的BFC

最新推荐文章于 2024-08-17 22:24:13 发布

在校大学生007

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量399

点赞数 3

分类专栏：个人笔记文章标签： css 前端

本文链接：https://blog.csdn.net/2202_75468889/article/details/139955190

版权

58 篇文章 0 订阅

订阅专栏

BFC（Block Formatting Context）是 CSS 中的一个概念，它定义了块级盒子的布局规则。BFC是一个独立的渲染区域，它决定了块级盒子如何布局，以及与其他元素的关系和相互作用。

内部布局：在 BFC 中，盒子从包含块的顶部开始，垂直地一个接一个地放置。相邻的块级盒子之间的垂直间距由 margin 属性决定。
隔离性：BFC 内部的元素不会影响到 BFC 外部的元素，反之亦然。这意味着 BFC 可以用来创建一个独立的布局环境，防止外部布局规则影响到内部，或者内部布局规则影响到外部。
防止外边距塌陷：在普通文档流中，两个相邻的块级盒子的垂直外边距会发生合并（塌陷）。但在 BFC 中，这种外边距塌陷不会发生。
包含浮动元素：如果一个 BFC 包含浮动元素，那么 BFC 的高度会考虑这些浮动元素的高度，从而防止父元素因为子元素浮动而高度塌陷。
阻止文字环绕：BFC 可以用来阻止文字环绕浮动元素，因为 BFC 内部的块级盒子会垂直排列，而不是环绕浮动元素。

如前所述，以下条件会创建一个新的 BFC：

根元素（<html>）
浮动元素（float 属性不为 none）
绝对定位元素（position 属性为 absolute 或 fixed）
display 属性为 inline-block、table-cell、table-caption、flex、inline-flex、grid 或 inline-grid
overflow 属性不为 visible（即 overflow 为 auto、scroll 或 hidden）
contain 属性值为 layout、content 或 paint
column-span 属性设置为 all