BFC及其应用

这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战

BFC（Block Formatting Context)即块格式化上下文

定义：

是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

作用：

具备BFC特性的元素会成为一个隔离的独立容器，在这个容器内部的所有元素不会影响外界元素的布局，也就是说触发BFC条件之后，容器内部的元素无论怎样布局、怎样设置都不会影响到外部

布局规则：

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算

触发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、row、tbody、thead、tfoot 的默认属性）或 inline-table`）
overflow 计算值(Computed)不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或column-width不为 auto，包括 ``column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

应用：

外边距塌陷：盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠。例如两个div元素都设置的了margin属性

<div class="blue item"></div>
<div class="red item"></div>

设置对应的css

.item {
  width: 100px;
  height: 100px;
  margin: 20px;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

此时页面发生了外边距塌陷，期望是两个div之间的间距是40px，结果只有20px

此时利用BFC，可以解决这个问题

在红色的div外层包裹一层结构，将其触发BFC

DOM结构

<div class="content">
  <div class="red item"></div>
</div>

设置CSS

.content {
  overflow: hidden;
}

清楚浮动：

DOM结构

<div class="content">
  <div class="blue item"></div>
  <div class="red item"></div>
</div>

CSS

.item {
  width: 100px;
  height: 100px;
  float: left;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.content {
  margin: 20px;
  border: 2px solid #f0f;
}

此时发现content的高度是没有被撑开的，出现了高度塌陷的问题

创建一个会包含这个浮动的 BFC，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。

设置 overflow: auto 创建一个新的BFC来包含这个浮动。我们的 <div> 元素现在变成布局中的迷你布局。任何子元素都会被包含进去。

使用 overflow 来创建一个新的 BFC，是因为 overflow 属性告诉浏览器你想要怎样处理溢出的内容。当你使用这个属性只是为了创建 BFC 的时候，你可能会发现一些不想要的问题，比如滚动条或者一些剪切的阴影，需要注意。另外，对于后续的开发，可能不是很清楚当时为什么使用 overflow。所以你最好添加一些注释来解释为什么这样做。

为content追加css

.content {
  margin: 20px;
  border: 2px solid #f0f;
  overflow: auto; // 新增
}

解决的高度塌陷问题