面试官：什么是BFC？BFC有什么特性？如何创建BFC？BFC有什么作用？

image-20220708211307377

程序员鱼乐，全网同名，分享编程知识与生活日常。还是个小菜狗，喜欢分享知识，如有错误还请大佬们指出，欢迎大佬评论区补充知识。

什么是BFC?

BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。

BFC有什么特性？

  1. BFC是一个块级元素，块级元素在垂直方向上依次排列。

  2. BFC是一个独立的容器，内部元素不会影响容器外部的元素。

  3. 属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。

    • 代码：

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .continer{
            width: 200px;
            height: 400px;
            background-color: green;
            overflow: hidden;
        }
        .continer .box1 {
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
            background-color: red;
        }
        .continer .box2 {
            width: 100px;
            height: 100px;
            margin-top: 40px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="continer">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
</body>
</html>

    • 视图：

      image-20220707231132197

  4. 计算BFC高度时，浮动元素也要参与计算。

如何创建BFC?

给父级元素添加以下任意样式

  1. overflow: hidden;
  2. display: flex;
  3. display: inline-flex;
  4. display: inline-block;
  5. position: absolute;
  6. position: fixed;

Tip：记住这几个常用的就可以了。

BFC有什么作用？

  1. 解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题

    • 解决前代码：

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .continer{
            width: 900px;
            background: black;
        }

        .box1{
            height: 300px;
            width: 300px;
            background: red;
            float: left;
        }

        .box2{
            height: 300px;
            width: 300px;
            background: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="continer">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

    • 解决前视图：

      image-20220707234750578

    • 解决后代码：

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .continer{
            width: 900px;
            background: black;
            overflow: hidden;
        }

        .box1{
            height: 300px;
            width: 300px;
            background: red;
            float: left;
        }

        .box2{
            height: 300px;
            width: 300px;
            background: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="continer">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

    • 解决后视图：

      image-20220707234925307

  2. 解决子级元素外边距会使父级元素塌陷的问题

    • 解决前源码：

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .continer{
            width: 100px;
            height: 200px;
            background: green;
        }

        .box{
            margin-top: 20px;
            height: 50px;
            width: 50px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="continer">
        <div class="box"></div>
    </div>
</body>
</html>

    • 解决前视图：

      image-20220707235333881

    • 解决后源码：

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .continer{
            width: 100px;
            height: 200px;
            background: green;
            overflow: hidden;
        }

        .box{
            margin-top: 20px;
            height: 50px;
            width: 50px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="continer">
        <div class="box"></div>
    </div>
</body>
</html>

    • 解决后视图

      image-20220707235502283

      Tip：当然这个问题也可以通过将子级元素的margin-top改为父级元素的padding-top来解决。

总结：面试官会考察你对BFC的理解，如何创建BFC以及BFC的作用等。如有错误，还请大家批评指正。大家如果有补充的，欢迎留言评论。

# css # css3 # html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟