BFC

全称 Block Formatting Context，简称 BFC 它是一块独立的渲染区域，它规定了在该区域中，【常规流块盒】的布局

常规流特点

常规流块盒在水平方向上，必须撑满包含块
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻，则进行外边距合并
常规流块盒的自动高度和摆放位置，无视浮动元素

开启 BFC 的方式

BFC 渲染区域：这个区域由某个 HTML 元素创建，以下元素会在其内部创建 BFC 区域：

根元素
浮动和绝对定位元素
overflow 不等于 visible 的块盒

不同的 BFC 区域，它们进行渲染时互不干扰创建 BFC 的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部浏览器渲染 BFC 区域的时候都是独立渲染的。

BFC 元素的特点

创建 BFC 的元素，它的自动高度需要计算浮动元素不会再受浮动影响产生高度塌陷
创建 BFC 的元素，它的边框盒不会与浮动元素重叠本身是 BFC 的元素遇到浮动的元素不会再无视，而会排列其后面
创建 BFC 的元素，不会和它的子元素进行外边距合并内外边距问题不会再出现，本质原因是因为所处于的 BFC 的区域不同。

示例

01.html02.html03.html04.html

html

<!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 {
        background: lightblue;
        /* position: absolute; */
        /* float: left; */
        /* 副作用最小的方式 */
        /* overflow: hidden; */
      }

      .clearfix {
        overflow: hidden;
      }

      .item {
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="container clearfix">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>

html

<!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>
      .float {
        width: 200px;
        height: 200px;
        margin: 20px;
        background: red;
        float: left;
      }

      .container {
        height: 500px;
        background: #008c8c;
        /* bfc */
        overflow: hidden; //注意，此处没有设置固定的宽度高度
      }
    </style>
  </head>
  <body>
    <div class="float"></div>
    <div class="container"></div>
  </body>
</html>

html

<!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 {
        background: #008c8c;
        height: 500px;
        margin-top: 30px;
        overflow: hidden;
      }
      .child {
        height: 100px;
        margin: 50px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="child"></div>
    </div>
  </body>
</html>

html

<!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 {
        float: left;
        background: #008c8c;
        position: relative;
      }

      .item {
        /* float: left; */
        position: absolute;
        left: 0;
        top: 0;
        margin: 20px;
        width: 200px;
        height: 200px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>
</html>

BFC ​

常规流特点 ​

开启 BFC 的方式 ​

BFC 元素的特点 ​

示例 ​

BFC

常规流特点

开启 BFC 的方式

BFC 元素的特点

示例