BFC 的扩写是 Block formatting contexts （块级格式化上下文），它看不见摸不着但对 CSS 盒模型有影响。
标准里对 BFC 的描述是：
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.
同时提到一个前端常见的 collapse 现象：
Vertical margins between adjacent block-level boxes in a block formatting context collapse.
所以笔者是这么理解 BFC 的：
浮动元素、绝对定位元素、非块盒的块容器（inline-block、table-cell、table-caption 元素）、overflow 不为 visible 的元素会创建 BFC
同一个 BFC 里，两个相邻的块级盒的垂直外边距会 collapse（塌陷）
也就是说不同的 BFC之间就会消除相邻元素的 collapse，以下是可创建 BFC 的条件：
div: float:left | right
div: display:inline-block | table-cells | table-captions
div: position:absolute
div: overflow:hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments
这里写了个测试 collapse 的 demo，经测试发现：
“同一个 BFC 里，两个相邻的块级盒”可以指相邻元素如 div-2 和 div-3，也可以指父元素和子元素如 div-1 和 div-2 或 3
设置 overflow 时，只能让 div-1 与它的子元素 div-2 或 3 消除 collapse，而不能让 div-1 与相邻元素 div-4 消除 collapse
参考：BFC 的文档
原文：BFC 的简单理解
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112464.html
摘要：非根元素，且其属性是和的元素的包含块它的包含块是由最近的祖先块容器盒的内容区域创建的。如何触发只需要保证满足下面至少一条就会触发根元素设置了值不为的元素设置了属性不为的元素设置了属性不为和的元素设置了的值为和中的任何一个的元素。 作者：心叶时间：2018-04-18 17:53 包裹元素剪裁条件 是不是包裹元素overflow设置为hidden以后，内部元素如果超过包裹元素的话就会被剪...
摘要：布局中有一些概念，一旦你理解了它们，就能真正提高你的布局能力。我们通常有两种方法来解决这个布局问题。是布局中的一个迷你布局你可以将看作是页面内的一个迷你布局。理解浏览器如何布置网页是非常基础的。 CSS布局中有一些概念，一旦你理解了它们，就能真正提高你的 CSS 布局能力。本文是关于块格式化上下文(BFC)的。你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道它是什么...
摘要：垂直方向的距离由决定。属于同一个的两个相邻的会发生叠加，与方向无关。计算的高度时，浮动子元素也参与计算。形成后出现的常见问题重叠问题浮动相关问题可以解决的问题叠加的问题，要阻止重叠，只要将俩个元素别放在一个中即可。 1. 什么是BFC BFC（block formatting context）：块级格式化上下文。简单来说它就是一种会影响元素与元素之间的位置、间距的属性。 2. 如何触...
阅读 2881·2021-11-24 09:39
阅读 2454·2019-08-30 15:53
阅读 3023·2019-08-30 13:47
阅读 1294·2019-08-30 12:50
阅读 1479·2019-08-29 16:31
阅读 2641·2019-08-29 13:14
阅读 1557·2019-08-29 10:55
阅读 788·2019-08-26 13:32
