BFC 及其应用 - JavaShuo

这是我参与更文挑战的第 10 天，活动详情查看：更文挑战css

块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视化 CSS 渲染的一部分。它是布局过程当中生成块级盒子的区域，也是浮动元素与其余元素的交互限定区域。html

BFC 特性

只要元素知足下面任一条件便可触发 BFC 特性（详细）：markdown

当父元素没有设置高度，且子元素为浮动元素的状况下，父元素会发生高度坍塌，上下边界重合，即浮动元素没法撑开父元素。ide

<div class="parent">
  <div class="child"></div>
</div>
复制代码

给子元素设置浮动：oop

.child {
  float: left;
}
复制代码

能够看到，子元素浮动后，父元素失去了高度。布局

为了解决浮动元素形成的父元素高度塌陷问题，能够将父元素设置成一个 BFC 来清除浮动，将父元素总体设置为 BFC 环境post

.parent {
  overflow: auto;
}
复制代码

<div class="box1"></div>
<div class="box2"></div>
复制代码

给第一个盒子 box1 设置浮动：ui

.box1 {
  float: left;
}
复制代码

能够看到，因为 box1 发生浮动，box2 未发生浮动，而浮动元素因为脱离文档流，第一个盒子堆叠在第二个盒子上。spa

为了让两个元素不重叠，咱们把右边的盒子设置成 BFC：

.box2 {  
  overflow: hidden;
}
复制代码

在标准文档流中，毗邻的两个或多个块级元素之间垂直方向的 margin 会合并成一个 margin，会取两个元素 margin 最大的那一个，这就是外边距重叠。

有三种状况会造成外边距重叠（Margin collapsing）：

而建立了块级格式化上下文（BFC）的元素，不会和它的子元素发生 margin 重叠。

咱们能够使用例如 overflow：hidden 来产生一个 BFC 环境来解决该问题。

<div></div>
<div></div>
复制代码

给两个 <div> 元素设置外边距：

div {
  margin: 50px;
}
复制代码

能够看到，第一个元素的下边距和第二个元素的上边距发生了重叠。

解决边距重叠的问题，能够将其放在不一样的 BFC 容器中。

<div class="container">
  <div></div>
</div>

<div class="container">
  <div></div>
</div>
复制代码

由于 BFC 是一个独立的容器，容器内外互不影响。