提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

关于BFC的整理

2023-03-20 14:50:53 时间

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>

相关文章