likes
comments
collection
share

面试让你谈谈BFC容器

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

前言

我们经常在不知不觉中使用到 BFC，例如，当元素的 float 不是 none，指定 float 为 left 或者 right 时，就可以创建 BFC。另外，绝对定位元素、display:inline-block、display:table-cell、display:flex、display:inline-flex 以及 overflow 指定除了 visible 的值等方式，也都可以创建 BFC。

BFC容器是什么

BFC（Block Formatting Context），即块格式化上下文，是 Web 页面的可视 CSS 渲染的一部分，也是块盒子的布局过程发生的区域。它是一个独立的渲染区域，规定了内部的 block-level box 如何布局，并且与这个区域外部毫不相干。

BFC布局规则

  1. 内部的 box 会在垂直方向，一个接一个的放置。
  2. box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 box 的 margin 会发生重叠。
  3. 每一个元素的 margin box 的左边，与包含块 border box 的左边对齐（对于从左往右的格式化，否则相反）。
  4. BFC 的区域不会与 float box 重叠。
  5. BFC 是一个单独的容器，容器里面的子元素不会影响到外面的元素。
  6. 计算 BFC 的高度时，浮动元素也参与计算高度。

margin重叠

margin重叠指的是两个或多个盒子（块级元素）的margin会发生重叠，重叠后，margin值取最大值。 只发生在上下，左右不会重叠。

<style>
        ul {}

        li {
            float: left;
            list-style: none;
        }
    </style>
</head>

<body>
    <ul>
        <li style="background-color: aqua;">1</li>
        <li style="background-color: rgb(13, 33, 33);">2</li>
        <li style="background-color: rgb(167, 16, 64);">3</li>
    </ul>
</body>

在这份代码中，三个li设置了浮动布局，往左边排列

面试让你谈谈BFC容器 但是我们能够看到，由于设置了浮动布局，ul是没有高度的，li脱离了标准文档流，撑不起ul这个盒子。

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

        .wrap {
            height: 500px;
            background-color: #600c0c;
            margin-top: 100px;
        }

        .box {
            height: 200px;
            background-color: #311d1d;
            /* 天生bug */
            /* margin重叠 父容器子容器都有margin */

            margin-top: 50px;

        }
    </style>
</head>

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

接下来，我们看看这份代码

面试让你谈谈BFC容器 这份代码中，父容器和子容器都设置了margin-top，父容器margin-top为100px，子容器的margin-top为50px，按道理说子容器应该距离父容器的顶部距离50px，但是可以看见没有起作用，这是因为发生了margin重叠，这个重叠会取最大值，父容器100px更大，因此父容器起作用。

那么如何消除margin重叠呢？

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

        ul {
            /* 这个属性会把一个容器变为BFC容器 */
            overflow: hidden;
            margin-top: 100px;
            background-color: #2315e3;
        }

        li:nth-child(1) {
            margin: 50px;
        }

        li:nth-child(2) {
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li style="height: 200px;height: 50px; background-color: #439773;">1</li>
            <li style="height: 200px;height: 50px; background-color: #0d1813;">2</li>
        </ul>
    </div>
</body>

接下来我们看看这份代码，在父容器中，添加了一个overflow: hidden;这会把父容器变为一个BFC容器，这时候看，这些父容器和子容器的margin无论值的大小，都起作用了。

回到刚刚那个问题，如何消除margin重叠问题？

怎么解决？方案：BFC，创建块级格式化上下文，解决margin重叠问题。

BFC的布局规则

  1. 内部的Box会在垂直方向，一个接一个的放置。
  2. bfc容器内部和外部的容器相互隔离，互不影响。---解决margin重叠问题。
  3. bfc容器内，相邻元素的margin在垂直方向会重叠。
  4. bfc容器会把浮动容器设置高度。不会把所有脱离文档流的元素都设置高度比如绝对定位。

看到这里布局规则的第四条，我们就能想到，在浮动布局中，浮动元素都脱离了文档流，撑不起父容器的盒子，因此我们也可以通过BFC布局方式解决这个问题

面试让你谈谈BFC容器 可以看到，在给父容器设置浮动left之后，这个容器就有高度了。

触发BFC

  1. overflow: hidden || auto || scroll || overlay
  2. 浮动元素，float: left || right
  3. 绝对定位元素，position: absolute || fixed
  4. display: inline-block
  5. display: table-cell 元素，table-xxx 元素
  6. display: flex || inline-flex 弹性容器

小结

BFC（Block Formatting Context），就像是页面布局中的一个神奇领域。它有着独特的规则和作用，让我们的页面布局更加灵活和稳定。

通过浮动元素、绝对定位元素、特定的 display 属性以及溢出隐藏等方式，我们可以触发 BFC 的形成。

BFC 能够有效解决父元素高度塌陷、浮动元素覆盖、外边距折叠等问题，还能实现自适应两栏布局等效果。

理解和掌握 BFC 能让我们成为更优秀的网页设计师，为用户带来更美观、合理的页面体验。让我们在布局的世界里，不断探索和运用 BFC 的神奇力量吧！

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