CSS系列之什么是BFC？如何形成？应用场景有哪些

Question

CSS系列之什么是BFC？如何形成？应用场景有哪些

yuanyuanbyte opened this issue 3 years ago · comments

圆圆 commented 3 years ago

什么是BFC？

块格式化上下文（Block Formatting Context，BFC），它是一个独立的渲染区域，与区域外部毫不相干。

如何形成BFC?

下列方式会创建块格式化上下文（BFC）：

应用场景有哪些？

1. 防止外边距塌陷

创建新的 BFC 避免两个相邻 <div> 之间的 外边距合并 问题

<!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>
        .blue,
        .red-inner {
            height: 50px;
            margin: 10px 0;
        }

        .blue {
            background: blue;
        }

        .red-outer {
            /* 通过overflow: hidden创建新的BFC */
            overflow: hidden;

            background: red;
        }
    </style>
</head>

<body>
    <div class="blue"></div>
    <div class="red-outer">
        <div class="red-inner">red inner</div>
    </div>
</body>

</html>

如果我们取消BFC，注释掉 overflow: hidden; 这行代码

  .red-outer {
      /* 通过overflow: hidden创建新的BFC */
      /* overflow: hidden; */

      background: red;
  }

从上图可以发现外边距塌陷了，这就是BFC的效果。

2. 防止浮动导致父元素高度塌陷

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            border: 10px solid red;
        }

        .inner {
            background: #08BDEB;
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="inner"></div>
    </div>
</body>

</html>

上面的代码效果如下：

接下来将inner元素设为浮动:

.inner {
    float: left;
    
    background: #08BDEB;
    height: 100px;
    width: 100px;
  }

会产生这样的塌陷效果：

但如果我们对父元素设置BFC后, 这样的问题就解决了:

.container {
    border: 10px solid red;

	/* 通过overflow: hidden讲父盒子设置为BFC */
    overflow: hidden;
}

这也是清除浮动的一种方式。