likes
comments
collection
share

BFC 趣谈，面试有新招

作者站长头像
站长
· 阅读数 32

前言

在CSS布局中，BFC是一个极其重要的概念，尽管它可能有些晦涩难懂。然而，理解并掌握BFC是必不可少的，因为它能够解决许多常见的布局问题。

简而言之，BFC定义了一个独立的渲染区域，在这个区域内的元素布局不受外部影响。这意味着它可以解决一些常见的布局难题，例如浮动元素引起的高度塌陷或外边距重叠问题。

正文

什么是BFC

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

这个是BFC的定义，是不是感觉晦涩难懂。可以简单的说，BFC就像是一个斗宗强者（元素）开辟的一方小世界，其中的所有元素都按照一定规则进行布局，不受外部元素的影响。它决定了元素的位置、大小和相互关系，同时也影响了浮动元素与其他元素的交互方式。

BFC的布局规则

  1. 内部元素在垂直方向上一个接一个地放置，形成了整齐的布局。
  2. BFC容器内外相互隔离，使得它们不会互相影响，有效地解决了margin重叠问题。
  3. 在BFC内部，相邻元素的垂直方向margin可能会发生重叠，这是需要注意的现象。
  4. 在计算高度时，BFC容器会考虑浮动元素，这一点尤其对于清除浮动至关重要。

触发BFC的条件

属性属性值
overflowhidden || auto || scroll || overlay
floatleft || right
poistionabsolute || fixed
displayinline-block || inline-flex || inline-grid || inline-table
displaytable-cell || table-xxx等
displayflex || inline-flex

BFC的应用场景

解决垂直外边距重叠问题

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            width: 20px;
            height: 20px;
        }
        .box1 {
            background-color: blue;
            margin: 20px;
        }
        .box2 {
            background-color: pink;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1"></div>
    </div>
    <div class="container">
        <div class="box box2"></div>
    </div>
</body>
</html>

我们通过设置box1的下外边距为20px和box2的上下边距为20px，那box1和box2的距离应该为40px，但是实际上却还是20px。

BFC 趣谈，面试有新招

解决：借助 overflow:hidden; 来引发 container的 BFC 状态，以此使得 box1和 box2处于不同的 BFC 环境中。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            width: 20px;
            height: 20px;
        }
        .box1 {
            background-color: blue;
            margin: 20px;
        }
        .box2 {
            background-color: pink;
            margin: 20px;
        }
        .container {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1"></div>
    </div>
    <div class="container">
        <div class="box box2"></div>
    </div>
</body>
</html>

BFC 趣谈，面试有新招

清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            border: 1px solid black;
        }
        .box {
            height: 20px;
            width: 20px;
            background-color: pink;
            float: left;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>
</html>

我们想得到子元素被黑色边框包裹，但是结果是这样

BFC 趣谈，面试有新招

因为子元素添加了浮动使其脱离了文档流，使父元素的高度塌陷。

解决：借助 overflow:hidden; 来引发 wrap的 BFC 状态，包裹住子元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            border: 1px solid black;
            overflow: hidden;
        }

        .box {
            height: 20px;
            width: 20px;
            background-color: pink;
            float: left;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>

</html>

BFC 趣谈，面试有新招

阻止元素被浮动元素覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box1 {
            background-color: blue;
            width: 100px;
            height: 100px;
            float: left;
        }
        .box2 {
            background-color: pink;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

box1设置了float: left;会脱离文档流，并且覆盖在box2上面。

BFC 趣谈，面试有新招

解决：借助 overflow:hidden; 来触发 box2 的 BFC 状态，从而使其与 box1 相互隔离，彼此不受影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box1 {
            background-color: blue;
            width: 100px;
            height: 100px;
            float: left;
        }
        .box2 {
            background-color: pink;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
BFC 趣谈，面试有新招

小结

面试中，理解和掌握 BFC（块格式化上下文）很重要。BFC 定义了独立的渲染区域，解决布局问题，如浮动元素引起的高度塌陷、外边距重叠等。触发 BFC 的条件有多种，如 overflow、float、position 等属性值。

转载自:https://juejin.cn/post/7364224622679687202
评论
请登录