阅读 154

BFC 的简单理解

默认文件1629964585754.png

☠ BFC 是什么?

BFC 的全称是 Block Formatting Context,名为 “块级格式化上下文”。

作用是让触发 BFC 的元素处于一个完全独立的空间,使其子元素的布局不会影响到外面元素的布局。


☠ 触发 BFC 方法?

触发 BFC 的方法如下:

  • 根元素 <html>
    • 意味着整个 HTML 文档就是一个大的 BFC 容器
  • float 的值不为 none
  • position 的值不为 static 或者 relative
  • display 的值为 table-celltable-captioninline-blockflexinline-flex 中的其中一个
  • overflow 的值不为 visible

☠ BFC 的特性

BFC 部分特性如下:

  • 内部的块级元素会相互堆叠在一起沿页面向下排列,而行内元素则会相互并列。
  • 处于同一个 BFC 中的元素相互影响,可能会发生外边距重叠。
  • 计算触发 BFC 元素的高度时,浮动元素也会参与计算。(避免父元素高度坍塌原理)
  • 浮动元素不会覆盖到触发 BFC 元素上。(阻止元素被浮动元素覆盖原理)
  • 触发 BFC 的元素会处于一个完全独立的空间,使其子元素的布局不会影响到外面元素的布局。(避免外边距重叠原理)

☠ BFC 的应用

1. 清除浮动,避免高度坍塌

正常情况下(子元素未设置浮动)

<style>
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 700px;
    margin-top: 50px;
    margin-left: 50px;
    background: #ccc;  /* 灰色 */
}

.left {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border: 3px solid orange;
    background: #73DE80;  /* 绿色 */
}

.right {
    width: 400px;
    height: 100px;
    box-sizing: border-box;
    border: 3px solid orange;
    background: #F31264;  /* 红色 */
}
</style>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
复制代码

在此情况下,父元素的高度是两个子元素的高度之和。



左边子元素设置浮动,导致父元素高度坍塌:

<!-- 代码差异 -->
<style>
.left {
    float: left;
}
</style>
复制代码

可以看到,此时父元素的高度和右边子元素的高度一致,说明父元素的高度在计算时并不会包含浮动元素的高度。



父元素利用 BFC 特性来清除浮动,使其计算高度时包含浮动元素

<!-- 代码差异 -->
<style>
.box {
    overflow: hidden;
}

.left {
    float: left;
}
</style>
复制代码

父元素通过触发 BFC,利用 BFC 的特性使其在计算高度时包含浮动元素。


2. 阻止元素被浮动元素覆盖

上面例子中虽然解决了父元素高度坍塌问题,但处于浮动状态的左边子元素覆盖了右边子元素,这并不是我们想要的布局,那么如何使两个子元素并列呢?

可以使用前面提到的 BFC 特性的第4点(浮动元素不会覆盖到触发 BFC 元素上),只需要让右边子元素触发 BFC 即可。

<style>
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 700px;
    margin-top: 50px;
    margin-left: 50px;
    background: #ccc;  /* 灰色 */
    overflow: hidden;
}

.left {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border: 3px solid orange;
    background: #73DE80;  /* 绿色 */
    float: left;
}

.right {
    width: 400px;
    height: 100px;
    box-sizing: border-box;
    border: 3px solid orange;
    background: #F31264;  /* 红色 */
    overflow: hidden;
}
</style>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
复制代码

可以看到两个子元素处于并列状态。

注意:如果父元素的宽度不够,那么右边子元素会换行展示。


3. 避免外边距重叠

默认情况下,垂直方向上两个相邻的盒子的外边距会重叠

<style>
.box {
    width: 400px;
    margin-top: 50px;
    margin-left: 50px;
    background: #ccc;  /* 灰色 */
}

.top,
.bottom {
    width: 200px;
    height: 200px;
    background: orange;
}

.top {
    margin-bottom: 20px;
}

.bottom {
    margin-top: 20px;
}
</style>

<body>
    <div class="box">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
复制代码

在这里插入图片描述 按照我们写的样式,两个盒子中间的距离应该是 40px 才对,但实际上只有 20px,说明它们的外边距发生了重叠现象。



使两个盒子分别处于不同的 BFC 容器中,有着各自的布局环境

<!-- 代码差异 -->
<style>
.bfc {
overflow: hidden;
}
</style>

<body>
    <div class="box">
        <div class="bfc">
            <div class="top"></div>
        </div>
        <div class="bfc">
            <div class="bottom"></div>
        </div>
    </div>
</body>
复制代码

此时两个盒子都有着自己的布局环境,互不影响。

☠ 参考资料

学习 BFC (Block Formatting Context) (juejin.cn)

带你用最简单的方式理解最全面的BFC_哔哩哔哩_bilibili

文章分类
前端
文章标签