SOURCE

<div class="parent">
  <div class="child"></div>
</div>


<!-- bfc的应用场景 -->

<!-- bfc垂直方向边距重叠的问题 -->
<div class="parent">
  <p>111111</p>
  <div class="bfc-res">
    <p>22222</p>
  </div>
  <p>333333</p>
</div>

<!-- bfc不与float重叠 -->
<div class="layout">
  <div class="left"></div>
  <div class="right"></div>
</div>

<!-- bfc子元素即使是float也会参与计算,清除浮动. -->
<div class="float">
  <div class="float-item">我是浮动元素</div>
</div>

.parent {
  overflow: hidden;
  background-color: pink;
}
.parent>p {
  margin: 5px auto 35px;
  background-color: lightskyblue;
}
.bfc-res {
  overflow: hidden;
}

.layout {
  background-color: pink;
}
.layout .left{
  float: left;
  width: 100px;
  height: 100px;
  background-color: gray;
}
.layout .right{
  overflow: auto;
  height: 110px;
  background-color: lightblue;
}

.float {
  background-color: greenyellow;
  /* float: left; */
  overflow: auto;
}
.float .float-item {
  float: left;
}