BFC

CSS 中的 BFC（Block Formatting Context，块级格式化上下文）是一个独立的渲染区域，在这个区域内，盒模型布局规则有自己的行为规范。创建了 BFC 的元素内部的布局不会影响到外部元素，并且可以包含浮动元素，防止浮动对兄弟元素和父容器造成影响。在 BFC 中，盒子会按照一定规则从上到下排列，左右边距不会重叠，浮动元素也不会超出其边界。

以下是一些形成 BFC 的条件：

条件	描述
float属性不为none	当元素的float属性设置为左（left）或右（right），该元素会创建一个新的 BFC。
position属性值为absolute或fixed且z-index不是auto	绝对定位元素（position: absolute或position: fixed）若其z-index值被显式设置（非auto），也会创建一个 BFC。
display属性值为inline-block	通过将元素的display属性设置为inline-block，可以使其创建一个新的 BFC。
display属性值为table-cell	表格单元格（display: table-cell）在表格中形成独立的布局环境，即创建了 BFC。
display属性值为table-caption	表格标题（display: table-caption）同样在其上下文中创建一个 BFC。
display属性值为flex	弹性布局容器（display: flex）会为其子元素创建一个新的 BFC。
display属性值为grid	网格布局容器（display: grid）也为其子元素创建一个新的 BFC。
display属性值为flow-root	flow-root是一种 CSS3 新特性，用于直接创建一个新的 BFC，无需其他复杂样式。
overflow属性值不为visible	当元素的overflow属性设置为auto、scroll或hidden时，它会创建一个新的 BFC，以便处理溢出内容和清除浮动等布局问题。

以上这些条件满足任意一条时，都会使得元素生成一个新的块级格式化上下文。

示例

* {
  padding: 0;
  margin: 0;
  background: #333;
  color: #fff;
}

.container {
  width: 200px;
  margin: 40px;
  border: 1px solid yellow;
  overflow: auto; /* 这一行创建了一个新的BFC */
}

.child {
  float: left; /* 浮动元素会被包含在.parent的BFC内 */
  width: 100px;
  height: 100px;
  background-color: red;
}

.sibling {
  /* 因为.parent形成了BFC，所以它能清除子元素的浮动影响，使得此元素不会被浮动元素推上来 */
  background-color: blue;
  padding: 10px;
}

<div class="container">
  <div class="child"></div>
  <div class="sibling">我是不受浮动影响的兄弟元素</div>
</div>

• .child 是一个红色的浮动方块，它向左浮动。
• .sibling 是一个蓝色的方块，如果没有 BFC，它可能会因为.child的浮动而跑到红色方块下面，但因为.container通过overflow: auto创建了 BFC，所以.sibling会紧跟在.child下方显示，就像浮动不存在一样。

没有形成 BFC 导致的问题

问题	描述
Margin 塌陷（Margin collapsing）	垂直相邻的块级元素的外边距可能会合并，取两者之间较大的值作为实际间距。
高度塌陷（Height collapse）	父元素如果没有创建 BFC 且子元素是浮动的，父元素可能无法正确计算包含浮动元素后的自身高度，导致内容环绕在浮动元素周围而父元素高度不足。
浮动影响兄弟元素布局	如果没有 BFC 包裹，浮动元素会导致其后续非浮动兄弟元素的内容跟随其排列，产生布局混乱。
布局顺序和覆盖问题	在常规流中，由于没有独立的渲染区域，不同元素之间的布局容易受到互相干扰，可能导致元素重叠或排列顺序不符合预期。

未形成 BFC 形成 BFC

通过创建 BFC 可以避免以上问题，确保内部元素的布局行为不受外部元素影响，并遵循一套明确的布局规则。

外边距折叠

外边距折叠（Margin collapsing）是指在 CSS 布局中，垂直相邻的两个或多个块级元素的外边距（margin）有时会合并为单个外边距，其大小遵循一定的计算规则。具体来说：

1. 相邻兄弟元素间的外边距折叠

当没有非空内容、padding 或 border 将它们分隔时，垂直方向上的相邻块级元素的外边距会折叠。

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

<!-- 结果：两个盒子之间的总间距不是50px（20px + 30px），而是取较大值30px -->
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

2. 父元素与第一个/最后一个子元素的外边距折叠

如果父元素没有边框且不创建新的 BFC（例如overflow不是visible），其顶部和底部外边距可能与其第一个或最后一个子元素的外边距折叠。

.parent {
  margin-top: 10px;
}

.child {
  margin-top: 20px;
}

<!-- 结果：父元素与子元素之间的总间距不是30px，而是取较大值20px -->
<div class="parent">
  <div class="child">Child</div>
</div>

3. 避免外边距折叠的方法

• 添加内边距（padding）或边框（border）：
  给其中一个元素添加非零的 padding 或 border 可以阻止外边距重叠。

  .box1 {
    margin-bottom: 20px;
  }
  
  .box2 {
    padding-top: 1px; /* 或 border-top: 1px solid transparent; */
    margin-top: 30px;
  }
  

• 创建 BFC（Block Formatting Context）：
  可以通过设置以下 CSS 属性之一来创建一个 BFC，这通常会阻止外边距折叠的发生：

  .box1 {
    overflow: auto; /* 或 hidden, scroll */
  }
  
  .parent {
    display: flex; /* 或 inline-block, table-cell, grid 等 */
  }
  

• 使用 clearfix 技巧：
  对于浮动元素不会导致外边距折叠，但不推荐仅仅为了防止折叠而使用浮动，因为浮动带来其他布局问题。然而，在清除浮动的同时也可以间接地阻止折叠，例如通过 clearfix 类实现。

• 负边距重叠的特殊情况：
  负边距同样适用折叠规则，但是同为负边距时取绝对值较大的作为最终外边距。若要避免这种情况，可采用上述方法分离元素或者改变布局方式。