深入浅出BFC

AgeeLP
18 阅读3分钟

1. 概念

Formatting context（格式化上下文）时W3C在CSS2.1规范里面的一个概念。
而BFC则是块级元素格式化上下文，它属于上述定位方案的普通流。

具有BFC特性的元素我们可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响外面元素，并且BFC具有普通容器所没有的一些特性。

我理解的原理就是：bfc会生成新的渲染层，这里还有渲染层以及复合图层的理解。

而不同的的渲染层之间存在以下特点：

  • 内部的盒子会在垂直方向上一个接一个的放置
  • 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
  • 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

2. 如何触发BFC

只要满足下面一个就能触发BFC：

  • body根元素
  • 浮动元素： float除none以外的值
  • 绝对定位元素：position absolute/fixed
  • display为inline-block、tables-cells、flex
  • overflow除了visible之外的值

3. BFC特性及其应用

（1）防止外边距折叠

同一个BFC下外边距会发生折叠，想要避免外边距的折叠，就饿可以将其放在不同的BFC容器中。

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

.container {
    overflow: hidden;
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}

这个时候两个盒子外边距就变成了200px

（2）BFC可以包含浮动的元素，清除浮动

我们都知道，浮动的元素会脱离文档流，有时候还会造成元素塌陷。
像这样

<div class="box">
    <div class="childBox"></div>
</div>

.box {
     border: 1px solid #000;
}
.childBox {
    width: 100px;
    height: 100px;
    background: #eee;
    float: left;
}

这里由于容器内元素浮动，脱离了文档流，所以容器只剩下2px边距高度，造成了容器坍塌，想要保持容器高度，则可以触发容器的BFC，那么容器将会包裹着浮动元素。

.box {
     border: 1px solid #000;
     overflow: hidden;
}
.childBox {
    width: 100px;
    height: 100px;
    background: #eee;
    float: left;
}

效果图

（3）BFC可以阻止元素被浮动元素覆盖。

先来看看例子

<div class="floatBox">我是一个左浮动的元素</div>
<div class="norBox">我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;
</div>

.floatBxo {
    height: 100px;
    width: 100px;
    float: left;
    background: lightblue;
}
.borBox {
    width: 200px;
    height: 200px;
    background: #eee;
}

这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden，就会变成：

avatar
文章
阅读
粉丝