浅谈CSS潜藏着的BFC

浅谈CSS潜藏着的BFC - 完整攻略

什么是BFC

BFC的全称为Block Formatting Context，即块级格式化上下文。它是CSS中的一种渲染模式，是一个独立的渲染区域，BFC中的元素在布局时只会考虑位于同一BFC中的元素。

BFC的原理

BFC的形成有以下几种情况：

1. 根元素或包含它的元素。
2. 设置 float、position: absolute/fixed。
3. display: inline-block/table-cell/table-caption/flex/grid。
4. overflow 值不为 visible（例如 overflow: auto/hidden/scroll）。

BFC的形成可以解决如下问题：

1. 清除浮动。在BFC中的元素会计算到浮动元素的高度，从而避免破坏布局。
2. 防止margin重叠。在BFC中的相邻元素的margin不会重叠。

BFC的示例

示例一：清除浮动

<div class="parent">
  <div class="float-left"></div>
  <div class="float-left"></div>
  <div class="clearfix"></div>
</div>

.parent {
  border: 1px solid #000;
  overflow: hidden; /* 触发BFC，清除浮动 */
}

.float-left {
  float: left;
  width: 50px;
  height: 50px;
  background-color: red;
}

.clearfix {
  clear: both;
}

在父元素 .parent 上设置 overflow: hidden，可以触发BFC，从而清除浮动。

示例二：防止margin重叠

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

.parent {
  border: 1px solid #000;
  overflow: hidden;
}

.child {
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: red;
}

在父元素 .parent 上设置 overflow: hidden，可以触发BFC，从而防止子元素 .child 的margin重叠。

总结

BFC是CSS中的一个很重要的概念，可以解决很多布局问题，例如清除浮动、防止margin重叠等。在实际开发中，需要灵活运用BFC，特别是清除浮动这个场景，应该尽量使用现代的解决方案，例如 flex 和 grid。