【CSS】什么是BFC？

块级格式化上下文（Block Formatting Context，简称BFC）是CSS布局中的一种重要概念，它决定了块级盒子如何在其容器内排列，以及浮动元素对其周围元素的影响。理解BFC可以帮助解决许多常见的网页布局问题，比如清除浮动、防止外边距重叠等。

BFC的触发条件

以下情况会自动创建一个新的BFC：

1. 根元素。
2. 明确设置了display: flow-root的元素。
3. 设置了float属性（非none）的元素。
4. 设置了position为absolute或fixed的元素。
5. 弹性盒模型（Flexbox）或网格布局（Grid Layout）的容器。
6. 当overflow属性不是visible时（如auto, scroll, hidden）。

BFC的特点

**垂直方向上的相邻兄弟元素不会发生外边距重叠。**在同一个BFC内部，两个相邻的块级元素之间如果有外边距，这两个外边距不会发生重叠。

<div style="margin-bottom: 20px;">Div 1</div>

<div style="margin-top: 30px;">Div 2</div>

如果Div 1和Div 2都在同一个BFC中，它们之间的间距将是两者外边距之和，而不是两者相加的最大值。

1. **BFC内的元素不会受到外部浮动元素的影响。**这意味着，即使父元素中有其他浮动元素，BFC内的元素也不会被这些浮动元素所影响，而是根据自身的定位和尺寸进行布局。
2. **BFC可以包含浮动元素。**如果一个元素创建了自己的BFC，那么它可以包含浮动元素而不会导致自身高度塌陷。
3. **BFC可以阻止清除效果溢出。**如果一个元素内部有浮动元素，可以通过创建BFC来包含这些浮动元素，从而避免其影响到外部元素。

如何利用BFC解决问题

清除浮动

.parent {
  overflow: auto; /* 或者 display: flex */
}
.child {
  float: left;
}

防止外边距重叠

.block {
  margin-bottom: 20px;
  overflow: hidden; /* 创建BFC */
}

布局控制

.container {
  position: relative;
  overflow: auto; /* 创建BFC */
}
.item {
  float: left;
}

总之，BFC是CSS布局中非常有用的概念，掌握它的特性和应用技巧能够帮助开发者更有效地控制网页布局，特别是在处理复杂布局和浮动元素时。