浅谈CSS潜藏着的BFC

1. 什么是BFC

BFC (Block Formatting Context) 即块级格式化上下文，是CSS中一种渲染模式，它是一个独立的渲染区域，内部的元素按照一定规则进行布局。每个BFC都是相互独立的，布局不会影响到外部的元素。

BFC具有以下特性：

BFC内部的元素在垂直方向上会一个接一个的排列

BFC区域不会与浮动元素重叠

BFC区域内部的元素不会影响到外部元素的布局

BFC区域的高度会被其子元素的浮动包含

BFC具有独立的边距折叠（Margin Collapse）特性

2. BFC的触发条件

要创建一个BFC，满足以下条件之一即可：

根元素

浮动元素（float不为none）

绝对定位元素（position为absolute或fixed）

overflow不为visible的块级元素

display为inline-block, table-cell, table-caption, flex,或inline-flex的元素

3. BFC的应用

3.1 清除浮动影响

浮动元素会脱离文档流，导致父元素塌陷。通过创建父元素的BFC来清除浮动影响，使父元素能够正确地包裹浮动元素。

.clearfix {
  overflow: hidden;
}

3.2 防止margin折叠

在正常情况下，相邻的两个块级元素的垂直外边距会发生折叠。通过创建BFC，可以避免这种情况发生。

.container {
  overflow: hidden;
}
.container > div {
  margin-bottom: 20px;
}

3.3 实现多列布局

BFC可以实现多列布局，可以将一个容器划分为多个等宽的列，并且列与列之间不会互相影响。

.container {
  column-count: 3;
  column-gap: 20px;
}

3.4 解决浮动元素引起的父元素高度塌陷问题

当一个元素内部包含浮动元素时，由于浮动元素脱离了文档流，父元素的高度会塌陷为0。通过创建BFC，可以使得父元素的高度能够正确地包含浮动元素。

.parent {
  overflow: hidden;
}
.parent::after {
  content: "";
  display: table;
  clear: both;
}

4. 总结

BFC在CSS中起到了非常重要的作用，它能够解决一些常见的布局问题，并且在清除浮动、防止margin折叠和实现多列布局等场景下有着广泛的应用。了解BFC的特性和触发条件，能够帮助我们更好地理解和掌握CSS布局的原理和技巧。