谈谈你对BFC的理解什么是BFC BFC 是 Block Formatting Context （块级格式上下文）的缩写

什么是BFC

BFC 是 Block Formatting Context （块级格式上下文）的缩写

BFC是一个独立的空间，里面子元素的渲染不影响外面的布局

BFC作用

1、解决margin塌陷

2、清除浮动

如何触发BFC

overflow: hidden
display: inline-block / table-cell / flex
position: absolute / fixed

<!DOCTYPE html>
<html>
  <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>bfc</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    section {
      width: 200px;
      height: 200px;
      background: #ccc;

      margin: 50px;
    }
    .box {
      overflow: hidden;
    }
  </style>
  <body>
    <div class="box">
      <section>section1</section>
    </div>
    <section>section2</section>
  </body>
</html>

<!DOCTYPE html>
<html>
  <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>bfc</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    section {
      width: 200px;
      height: 200px;
      background: #ccc;
      margin: 20px;
    }
    .box {
      display: inline-block;
      background: black;
    }
    .left {
      float: left;
    }
    .right {
      float: right;
    }
  </style>
  <body>
    <div class="box">
      <section class="left">left</section>
      <section class="right">right</section>
    </div>
  </body>
</html>