阅读 226

重温CSS之"BFC"

1.叫什么?

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

2.是什么?

通俗的来说: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>
复制代码

image.png

发现两个同级的块级盒子在垂直方向上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>
复制代码

image.png

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>
复制代码

image.png

使用 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>
复制代码

image.png

文章分类
前端
文章标签