likes
comments
collection
share

“overflow: hidden”为何能清除浮动?

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

引言

在前端开发中，我们经常会听到关于BFC（Block Formatting Context）容器的概念。BFC可以说是前端布局中非常重要的一环，它可以帮助我们解决一些布局上的难题。今天，就让我们一起来探究一下JS中BFC容器的奥秘吧！

什么是BFC容器

BFC指的是块级格式化上下文，是一个独立的渲染区域，里面的元素布局不受外部影响。在JS中，我们可以通过控制元素的样式属性来触发BFC，从而达到一些特定的布局效果。

使用场景

1. 清除浮动

在网页布局中，经常会用到浮动来实现多列布局或者图片文字环绕等效果。但是，浮动元素会造成父元素高度塌陷的问题。这时候，我们可以通过在父元素上触发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>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            overflow: hidden; /*设为BFC容器*/
            background-color: rgb(175, 175, 232);
        }

        li:nth-child(1) {
            float: right;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li style="width: 200px;height: 50px;background-color: red;">2</li>
        </ul>
    </div>
</body>

</html>

子容器li浮动后，ul仍然有宽度：

“overflow: hidden”为何能清除浮动?

2. margin重叠

当相邻元素的垂直方向的margin发生重叠时，会影响到页面的布局效果。通过触发BFC，可以使得相邻元素的margin不再重叠，从而得到更合理的布局结果。

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            background-color: rgb(175, 175, 232);
        }
        li {
            margin: 50px; /*设置margin*/
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li style="width: 200px;height: 50px;background-color: red;">2</li>
        </ul>
    </div>
</body>

</html>

ul未设为BFC容器，margin重叠 “overflow: hidden”为何能清除浮动?

设为BFC容器：

“overflow: hidden”为何能清除浮动?

BFC 布局规则

触发BFC的元素会按照一定的规则进行布局，这些规则包括：

  1. 内部的 Box 会在垂直方向，一个接一个地放置。
  2. BFC内部和外部的容器相互隔离，不会相互影响。 --- 解决margin重叠问题
  3. BFC容器内相邻元素的margin在垂直方向上会发生重叠，水平方向上不会发生重叠。
  4. BFC容器在计算高度时，浮动元素也参与计算。---清除浮动

触发BFC的CSS属性

触发BFC的CSS属性有很多，比如：

    1. overflow: hidden | auto | scroll | overlay | flow-root
    1. display: inline-block | table-cell | table-caption | flex | grid
    1. float: left | right
    1. position: absolute | fixed

以上这些属性可以帮助我们在页面布局中触发BFC，从而实现一些特定的效果和解决一些常见的布局问题。

结语

希望通过本文的介绍，你对JS中的BFC容器有了更深入的了解。在实际的网页布局中，灵活运用BFC容器的知识，可以让我们更加高效地完成页面布局任务。今天的内容就到这里了。如果你觉得这篇文章有帮助或有所启发，别忘了给我一个鼓励的赞！

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