What?你是说BFC？🥱

我是紫菜苔
475 阅读4分钟

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

前端学习的零零散散不是很系统化，可能我们学过不短时间后，中间依然很多概念都没有很好的理解，今天来看一下之前不是很清楚的BFC这个东西。

什么是BFC

先来一下比较官方的概念:

BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

好吧，看完之后我开始也不是很理解，我们先了解一个东西，BFC全称是Block Formatting Context即块级格式化上下文，它是一种布局规则的表现形式。

好了，有了比较正式的定义后那么怎么简单的理解呢，简单的来说BFC元素特性表现原则就是，内部子元素形成沙盒隔离，不论如何变化都不会影响外部的元素。

常见的触发BFC的情况如下：

  1. float的值不为none。
  2. overflow的值为auto,scroll或hidden。
  3. display的值为table-cell, table-caption, inline- block中的任何一个。
  4. position的值不为relative和static

没有问题，那么如果触发了BFC又回如何?简单的说元素触发BFC后就会形成一个新的BFC区域，这个区域会按照下面的规则进行布局表现:

  • BFC内部

    • 内部的Box会在垂直方向，一个接一个地放置。
    • 内部Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
    • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
    • 计算BFC的高度时，浮动元素也参与计算

  • BFC区域

    • BFC的区域不会与float box重叠。
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

好吧，说了这么的都是概念上的东西，那么BFC常解决的问题呢，下面来看。

1.自适应两栏布局

看段代码:

<style>
 .test1 .left {
    width: 30%;
    float: left;
    background: red;
}

.test1 .right {
    width: 70%;
    background: blue;
    height: 200px;
}
</style>

<div class="test1">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

d23abcf34eec5b65efaf2293703dd9e.png

两个div区域，都在:root形成的BFC区域中，形成的效果于上述的每个元素的margin box的左边， 与包含块border box的左边相接触一致，两个元素都靠在包含块border box的左边。

上面，.left是一个有float:left样式，所以.left是一个BFC区域,那么让.right也变成BFC区域，给它加上overflow:auto,那么两个BFC之间不会重叠。

<style>
.test1 .left {
    width: 30%;
    float: left;
    background: red;
}

 .test1 .right {
    width: 70%;
    background: blue;
    height: 200px;
    overflow: auto;
}
</style>

<div class="test1">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

3886794c39a039a032b924f556f086a.png

2.清除内部浮动

如果div内部元素样式是float的话，那么它一般是没有高度的，这样会显得很不正常。

<style>
.test2 {
    border: 10px solid pink;
}

.test2 .float {
    float: left;
    width: 200px;
    height: 200px;
    border: 10px solid lightblue;
}
</style>
<div class="test2">
    <div class="float">1</div>
    <div class="float">2</div>
</div>

3664e121a688c586a6a1c0ef5403c32.png

可以看到外层的div是没有高度的，那么如何解决，那就是让外层div变成BFC,那么他计算高度时就会加入内部float元素。

<style>
.test2 {
    border: 10px solid pink;
    overflow: auto;
}

.test2 .float {
    float: left;
    width: 200px;
    height: 200px;
    border: 10px solid lightblue;
}
</style>
<div class="test3">
    <div class="float">1</div>
    <div class="float">2</div>
</div>

2e16e3ae90021a5da73c422319d82c0.png

3. 防止垂直 margin 重叠

按照之前BFC内部元素的布局说明,BFC内部元素竖直方向的margin会合并重叠，如下：

<style>
.test3 {
    width: 400px;
    border: 10px solid pink;
    overflow: auto;
}

.box {
    width: 200px;
    height: 200px;
    border: 10px solid lightblue;
    margin: 20px;
}
</style>
<div class="test3">
    <div class="box">1</div>
    <div class="box">2</div>
</div>

5b73dd4f2536cc03647822d01d2fdfc.png

可以看到我们每个box设置了20px的margin,按理说两个box在竖直方向上应该是40的margin，但实际它们之间的margin还是20px,应为竖直方向上相邻的margin被合并了，那么如何解决呢，方法就是将其中一个box形成一个BFC区域，BFC区域单独计算，那么margin就不会被重叠。

<style>
.test3 {
    width: 400px;
    border: 10px solid pink;
    overflow: auto;
}

.wrap {
    overflow: auto;
}

.box {
    width: 200px;
    height: 200px;
    border: 10px solid lightblue;
    margin: 20px;
}
</style>
<div class="test3">
    <div class="wrap">
        <div class="box">1</div>
    </div>
    <div class="box">2</div>
</div>

0845a6fdf9ea9d932c22ad71e40f3bf.png

总结

在现在flex，grid大行其道的时候，可能BFC已经没有那么显得重要，毕竟flex,grid已经可以提供一致性的解决方案，但是前端的学习很多时候也是对历史和细节的了解和回顾，BFC这种隐性的设置在此前也提供了很多操作上的遍历性，以及解决问题的思路，可以不去使用的，但是了解这些东西也会帮助我们对一些问题的理解多有帮助和受益。

avatar
文章
阅读
粉丝