快来看！你不知道的BFC~1.哪些情况会创建BFC? 根元素（<html>）浮动元素（元素的float不是none）

1.哪些情况会创建BFC?

根元素（<html>）
浮动元素（元素的float不是none）
绝对定位元素（元素的position为absolute或fixed）
行内块元素（元素的display为inline-block）
表格单元格（元素的display为table-cell，HTML表格单元格默认为该值），表格标题（元素的display为table-caption，HTML表格标题默认为该值）
匿名表格单元格元素
overflow计算值（computed）不为visible的块元素
弹性元素（display为flex或inline-flex）元素的直接子元素
网格元素（display为grid或inline-grid）元素的直接子元素
display值为flow-root的元素

2.BFC介绍

在BFC中，box会在垂直方向上一个挨着一个排布
垂直方向的间距由margin属性决定
在同一个BFC中，相邻两个box之间的margin会折叠
在BFC中，每个元素的左边缘是接挨着包含块的左边缘

3.BFC的作用

解决margin的折叠问题

.container {
  overflow: auto;
}

.box1 {
  height: 200px;
  width: 400px;
  background-color: orange;

  margin-bottom: 30px;
}

.box2 {
  height: 150px;
  background-color: purple;

  margin-top: 50px;
}

<body> 
  <div class="container">
    <div class="box1"></div>
  </div>
  <div class="box2"></div>
</body>

解决浮动高度塌陷问题（绝对定位元素忽略）

浮动元素的父元素触发BFC, 形成独立的块级格式化上下文
浮动元素的父元素的高度是auto。如果只有inline-level，是行高的顶部和底部的距离。如果有block-level，是最顶层的块上边缘和最底层块盒子的下边缘之间的距离。如果有绝对定位元素，将被忽略。如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘

.container {
  background-color: orange;
  position: relative;

  overflow: auto;
}

.item {
  width: 400px;
  height: 200px;
  box-sizing: border-box;
  border: 1px solid #000;
  float: left;
  background-color: #f00;
}

<body>
  
  <div class="container clear_fix">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

</body>