解读官网定义的 bfc 参考官网想了解清楚还是得解读官方文档这上面才是最清晰的不过找文档对应的内容和读文档这件

参考官网

因为对这一块了解的不是很清楚看了很多博客都感觉差点东西没讲我想了解到的都没有讲清楚可能我检索方式有问题吧最后还是去找文档了
想了解清楚还是得解读官方文档这上面才是最清晰的
不过找文档对应的内容和读文档这件事情本身就挺难的
要是看不太懂还是去看看别人得博客和教程吧

FC

格式化上下文 Formatting Context
官方是有对这个定义的而且定义的很清楚
- 只要是页面上的盒子都属于一个 FC
- 要么属于 BFC 要么属于 IFC 不会同时属于他们两个

BFC

Block Formatting Context （块级格式上下文）
对应块元素形成的规则
官方定义
- “在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由“margin”属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。
  
  在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合）。” - 9.4.1

bfc 有什么作用呢

在 bfc 中里面的盒子就会在垂直方向上一个挨着一个排列
就是我们都知道浏览器上面显示元素是一个紧挨着一个的你可以说这是浏览器完成的这没有错但是这其实就是 bfc 完成的
他会有一个规则来规定这种布局方式而 bfc 就是这样一套规则
- 他的规则就是从顶部开始
- 而且只有运用了 bfc 规则的元素内部才会这样排布
- 默认最外层 <html> 标签就是使用了 bfc 规则的所以我们在没设置任何 bfc 的情况下就是默认从上到下排列的
- 而盒子之间的距离就是通过 margin 来设置的
- 我知道啊就是通过 margin 来设置的
- 但是他就是通过 bfc 进行解析的
- 并且 bfc 规定在同一个 bfc 中两个元素的 margin 会折叠
  - 所以不要说这是浏览器导致的了就是 bfc 这样规定的
  - 而为什么设置 bfc 就不会产生 margin 重叠
    - 因为他说了啊只有在同一个 bfc 中才会折叠
    - 我们给内部的元素设置了 bfc 那么就形成了一块新的 bfc 所以就不会重叠了
- ```
<html>
  <div class="box1"></div>
  <div class="box2"></div>
</html>

.box1 {
  margin: 50px;
}

.box2 {
  margin: 10px
}
// 这时 box1 box2 之间距离是 50px
// 因为两个盒子处于同一个 bfc 中(html)

.box1 {
  overflow: auto;
}
// 这样其实效果一样的 虽然 box1 有 bfc 了 但是仍然处于 html 的 bfc 中

<html>
  <div class="bfc">
    <div class="box1"></div>
  </div>
  <div class="box2"></div>
</html>

.bfc {
  overflow: auto;
}

// 这样 box1 才处于一个新的 bfc 中 margin 就不会重叠了
```

清除浮动

bfc 就是可以清除浮动的但是他有两个硬性条件
- 浮动元素得父元素触发 bfc 形成独立得块级格式化上下文
- 浮动元素得父元素的高度是 auto 的
首先得知道 css 默认是 height: auto 的所以一般只需要设置 bfc 就行了
- 如果 height 设置了其他值即使有 bfc 也会不起效果
bfc 的高度是 auto 情况下怎么计算高度
- 1.如果有 inline-level (行内元素) 是行高顶部和底部的距离
- 2.如果有 block-level (块级元素) 是由最顶部的块上边缘和最底部的块下边缘之间的距离
- 3.如果有绝对定位的子元素 1 2 两条计算方式直接被忽略
- 4.如果有浮动元素那么它会包含浮动元素的最下边的距离
  - 所以这也是为什么 bfc 能清除浮动但是对绝对定位元素没有效果的根本原因
  - 它定制的规则就是这样的

mdn 上列出会形成 bfc 的情况

根元素（<html>）
浮动元素（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、tr、tbody、thead、tfoot 的默认值）或 inline-table）
overflow 值不为 visible、clip 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
多列容器（column-count 或 column-width (en-US) 值不为 auto，包括column-count 为 1）
column-span 值为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中 (规范变更, Chrome bug)

IFC

Inline formatting context

官方定义
- “在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。只有水平外边距、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐：可以底部对齐或顶部对其，或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。（The rectangular area that contains the boxes that form a line is called a line box.）” - 9.4.2
内联元素按照句子在特定书写模式下运行的方向依次显示。虽然我们不倾向于认为内联元素有一个框，就像 CSS 中的所有元素一样。这些内嵌的盒子一个接一个排列。如果包含块中没有足够的空间容纳所有框，则框可以换行。创建的行称为行框。

这个面试考的少不解读了自己看吧很清楚了