深入BFC笔记

第一层：

BFC是css2提出的一个概念：叫格式化上下文。

作用：当一个元素触发了 BFC，它会与其他元素隔离，不受外部布局的影响，从而改变其内部布局规则。

常见用于场景：清除浮动影响，避免外边距合并。

第二层：

BFC的本质是用于描述块级盒子的渲染规则，它指定了块级盒子如何布局、定位以及与其他盒子的关系。

他为什么不是所有元素默认触发BFC，而是特点触发，因为当所有元素都默认触发BFC的时候会让灵活布局变得僵硬，这和开发者开发的的是冲突的，即分离内容与样式，以及样式的可重用性和可维护性。

CSS 的设计初衷之一是将样式与内容分离，使得页面结构与样式表相互独立，从而提高代码的可维护性和可重用性。通过将样式定义在外部样式表或者内部样式表中，我们可以轻松地修改样式而不影响页面内容，也可以在不同页面之间共享样式，提高代码的重用性。

例子：浮动元素常常用于创建复杂的布局，例如实现文字环绕图片、多栏布局等。在传统的布局中，浮动元素会导致父级元素的高度塌陷，使得父级元素无法包裹其内部的浮动元素。为了解决这个问题，通常需要在父级元素上触发 BFC，例如设置 overflow: hidden; 或者 display: flow-root;。这样可以让父级元素形成 BFC，从而包裹其内部的浮动元素。然而，如果所有块级盒子默认触发 BFC，那么浮动元素在布局时就无法像以前那样自由地漂浮在页面上，而是会受到其父级元素 BFC 影响，导致布局僵化。

那么都有什么特殊组合来解决这个问题能

1. overflow：当一个元素设置了 overflow 属性为除了 visible 之外的值（如 hidden, auto, scroll），会触发 BFC。为什么visible不会触发，因为内容直接会溢出容器，并且会显示在容器外部。这意味着内容可能会遮挡其他元素，并且不会剪切内容或创建滚动条。如果设置BFC会出现那么就意味着他不会溢出父元素的BFC，那么这个属性就坏了

2. display: flex; 和 display: inline-flex;：flexbox布局虽然有类似BFC的功能，但是那触发的并不是传统的BFC而是他的Flex Container Contexts。新的特点是：能够按照弹性容器（Flex Container）和弹性项目（Flex Item）的定义来排列元素。并且网格布局grid创建的是网格也不是一个东西，但是这后来剥离出来的，在MDN里面还是算BFC

3. display: inline-block;：通常，inline-block 元素会和其他行内元素一样按照行内排列，但是如果一个 inline-block 元素触发了 BFC，那么它将会按照块级元素的方式进行布局，不会和其他行内元素在同一行上。

4. position: absolute; 和 position: fixed;：绝对定位和固定定位的元素会生成一个 BFC，这是因为它们脱离了文档流，需要创建一个独立的渲染上下文来布局自身及其子元素。

5. float：当一个元素设置了 float 属性后，它会脱离正常的文档流，并且在布局时会形成一个新的 BFC。这意味着浮动元素的布局会受到 BFC 的影响，它会影响其周围元素的排列和布局

第三层

bfc：这个概念来自于css的视觉格式化模型中的 正常流。

当浮动元素、绝对定位元素，'display' 特性为 "inline-block"的元素，以及 'overflow' 不是 "visible" 的元素，会创建新的 BFC(Block formatting contexts)。

请注意，是这些元素创建了块格式化上下文，它们本身不是块格式化上下文。