likes
comments
collection
share

BFC（块级格式上下文）

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

BFC算是比较理论的东西，在实际应用中比较少应用到

一：概念

BFC(Block formatting context)，块级格式上下文，它是指一个独立的块级渲染区域，只有Block-level Box（块级元素）参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

二：常见现状

当一个盒子没有设置高度的时候，当盒子内部的子元素都漂浮时，无法撑起自身

原因：这个盒子没有形成BFC

三：如何创建BFC

1，float的值不是none。

2，position的值不是static或者relative。

3，display的值是inline-block，flex或者inline-flex。

4，overflow:hidden

四：BFC的其他作用

1，可以取消盒子margin塌陷

2，可以阻止元素被浮动元素覆盖

五：示例

1：取消盒子margin塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin塌陷</title>
    <style>
        .father{
            width: 200px;
            height: 300px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

效果如下：子元素与父元素并没有间隔的20px。

BFC（块级格式上下文）

当给父元素添加一个float：left；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin塌陷</title>
    <style>
        .father{
            width: 200px;
            height: 300px;
            background: red;
            float: left;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

效果如下：

BFC（块级格式上下文）

2,阻止浮动元素覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻止浮动元素覆盖</title>
    <style>
        .son{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            float: left;
        }
        .son-last{
            width: 200px;
            height: 300px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son-last"></div>
</body>
</html>

效果如下：

BFC（块级格式上下文）

给son-last添加overflow: hidden;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻止浮动元素覆盖</title>
    <style>
        .son{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            float: left;
        }
        .son-last{
            width: 200px;
            height: 300px;
            background-color: brown;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son-last"></div>
</body>
</html>

效果如下：

BFC（块级格式上下文）

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