块格式上下文 BFC1.BFC概念 2.BFC触发条件 3.BFC应用块格式上下文（BFC）：盒子垂直排列；隔离的独立

普通流：

盒子依次排列
position为static或relative且float为none

块格式上下文（BFC）：

盒子垂直排列；
隔离的独立容器，里外互不影响；
同一个BFC环境元素可能发生margin外边距重叠

BFC触发条件：

根元素html
float元素不为none
position为absolute或fixed
display为inline-block、inline-flex、inline-table、inline-grid、table-caption
是BFC - overflow不为： visible、（inherit 不一定：从父元素继承 overflow属性的值）、 initial（设置为CSS属性中默认值，IE不支持）、 revert（当前元素的样式还原成浏览器内置的样式）、 unset（不做设置；与css是否继承属性相关，如果一个样式是可继承属性，该设置为inherit;反之如果是非继承属性，则设置为initial）;

是BFC - overflow为： auto（如果没有超出容器的显示，将会正常显示，如果超出，将会出现一个滚动条）、 hidden（如果内容超出父级容器，超出部分将会被隐藏）、 overlay（非标准属性；使滚动条显示在内容的上层，而不占用空间）、 scroll（无论是否超出容器，都会出现一个滚动条）

BFC应用：

margin重叠：一个BFC内元素可能发生外边距重叠
盒子塌陷：不是BFC元素时，内部浮动元素高度不参与BFC计算
实现自适应两栏布局

代码链接：gitee.com/carrierxia/…

<!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>示例一：margin重叠</title>
  </head>
  <style>
    .demo_1 {
      margin: 100px;
      background-color: red;
      width: 100px;
      height: 100px;
      /* 给demo_1创建BFC新的环境 */
      /* display: inline-block; */
      /* display: inline-flex; */
      /* display: inline-table; */
      /* display: inline-grid; */
      /* display: table-caption; */
    }
  </style>
  <body>
    <div>demo_1在html这个BFC里发生了外边距重叠</div>
    <div class="demo_1"></div>
    <div class="demo_1"></div>
  </body>
</html>

<!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>示例二：盒子塌陷</title>
  </head>
  <style>
    .demo_2_parent {
      background-color: blue;
      /* 是BFC元素时，内部浮动元素高度参与BFC计算 */
      /* overflow: auto; */
      /* overflow: hidden; */
      /* overflow: overlay; */
      /* overflow: scroll; */
    }

    .demo_2_child {
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
      color: #fff;
      margin: 100px;
    }
  </style>
  <body>
    <div>demo_2_parent高度塌陷</div>
    <div class="demo_2_parent">
      <div class="demo_2_child">float元素</div>
    </div>
  </body>
</html>

<!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>示例三：实现自适应两栏布局</title>
  </head>
  <style>
    .left {
      width: 100px;
      height: 150px;
      float: left;
      background: blue;
    }

    .right {
      height: 300px;
      background: red;
      /* BFC不会与浮动元素重叠 */
      /* display: inline-block; */
    }
  </style>
  <body>
    <div class="left">left</div>
    <div class="right">right</div>
  </body>
</html>

解决后：