关于BFC的整理

原创

前端小tips

修改于 2021-11-25 21:33:34

22100

代码可运行

文章被收录于专栏：前端文章小tips前端文章小tips

运行总次数：0

代码可运行

1.叫什么？

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文” BFC元素特性表现原则就是：内部子元素不会影响外部的元素。

2.是什么？

通俗的来说：BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

3.BFC生成的条件是？

float值不为none overflow的值不为visible display的值为inline-block/table-cell/table-caption/table position的值为absolute/fixed

4.使用场景有哪些？

1.防止margin重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .a{
            width:100px;
            height:100px;
            background-color: pink;
            margin:10px;
        }
        .b{
            width:100px;
            height:100px;
            background-color: rgb(126, 127, 206);
            margin:10px;
        }
    </style>
</head>
<body>
    <div>
        <div class="a">1</div>
        <div class="b">2</div>
    </div>
</body>
</html>

发现两个同级的块级盒子在垂直方向上margin值应该是20px,但是却只有10px,发生了重叠

于是我使用BFC的一条规则 " overflow: hidden; "来去除重叠问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .a{
            width:100px;
            height:100px;
            background-color: pink;
            margin:10px;
        }
        .b{
            width:100px;
            height:100px;
            background-color: rgb(126, 127, 206);
            margin:10px;
        }
        .c{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        <div class="a">1</div>
        <div class="c">
            <div class="b">2</div>

        </div>
    </div>
</body>
</html>

2.浮动问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .one{
            width:100px;
            height:100px;
            background-color: rgb(150, 206, 150);
            float:left;
        }
        .two{
            width:200px;
            height:200px;
            background-color: rgb(161, 149, 216);
        }
       
    </style>
</head>
<body>
   
    <div>
        <div class="one">1</div>
        <div class="two">2</div>
    </div>
</body>
</html>

使用 display: inline-block;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .one{
            width:100px;
            height:100px;
            background-color: rgb(150, 206, 150);
            float:left;
        }
        .two{
            width:200px;
            height:200px;
            background-color: rgb(161, 149, 216);
        }
        .father{
            display: inline-block;
        }
    </style>
</head>
<body>
   
    <div>
        <div class="one">1</div>
        <div class="father">
            <div class="two">2</div>
        </div>
    </div>
</body>
</html>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css