整理一些BFC 应用场景

417 阅读2分钟

BFC是块级格式化上下文的意思。它规定内部块级元素格式的一个独立环境。

通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。

触发条件

当元素属性为float、positon:absolute、display:inline-block、overflow 非visible(默认值)、flex 盒子、grid 盒子等属性时,会创建格式上下文。

应用

1.父盒子塌陷问题

我们经常遇到一种情况,父盒子下如果子盒子浮动了,那么父盒子就没有高度了,这是因为没有触发 BFC,我们可以

给父盒子清除浮动,或者写一句overflow hidden创建一个父盒子的 BFC,它就会把浮动元素包住解决高度问题

<div class="father">
  <div class="box"></div>
</div>
.father{
  border:1px solid black;
}
.box{
  height:50px;
  width:50px;
  border:1px solid red;
  float:left;
}

image

父盒子添加overflow:hidden 或者其他变成 BFC 的样式后

image

2.外边距合并问题

两个上下的盒子分别写margin-top和 margin-bottom 时,会出现外边距合并,这时候给一个盒子用 BFC包起来,就不会出现外边距重叠。

BFC 前

.box1{
  border:1px solid black;
  height:50px;
  width:50px;
  margin-bottom:50px;
}
.box{
  height:50px;
  width:50px;
  border:1px solid red;
  margin-top:50px;
}
<div class="box1"></div>
<div class="box"></div>

image

然后给其中一个盒子套上一个 BFC 盒子

  <div class="box1"></div>
  <div class="bfcBox">
    <div class="box"></div>
  </div>
.bfcBox{
  display:flex;//变成 bfc
}

就可以发现外边距合并的问题解决了 image

3.避免被浮动元素覆盖

BFC 可以阻止元素被浮动元素覆盖,比如两个上下的的盒子分别是盒子1和2,1浮动了,那么盒子2会往上走,并且被盒子1压住。

.box1{
  height:50px;
  width:50px;
  background-color:black;
}
.box2{
  height:100px;
  width:100px;
  background-color:red;
}
<div class="box1"></div>
<div class="box2"></div>

压住前 image 现在我给黑盒子设置 float:left 后 image 可以看到红盒子往上走并且被压住了

这时候如果给红盒子设置overflow: hidden使其变成 BFC,那么红盒子就会往旁边跑避免被压住。 image

4.父子盒子 margin 折叠问题

现在我要给设置一个父盒子一个子盒子。

  我是文字
  <div class="father">
    <div class="child"></div>
  </div>
.father {
  height: 100px;
  width: 100px;
  background-color: black;
}
.child {
  height: 50px;
  width: 50px;
  background-color: red;
  overflow: hidden;
}

image 现在我希望子盒子往下面一点,于是设置 margin-top:20px

结果发现把父盒子带跑了。

image

我可以给父盒子设置一个 border 来避免父盒子也被带偏。

  border:1px solid transparent;

BFC解法:给父盒子设置属性使得其变成 BFC

  overflow:hidden;

两种方式的结果都是一样的。 image