BFC的理解

BFC是什么？
BFC如何触发？
BFC的作用
问题解决

BFC是什么？

BFC是块级格式上下文（Block Formatting Context），是CSS布局的一个概念，在BFC布局里面的元素不受外面元素影响。

BFC如何触发？

设置浮动：float有值并不为空 float:left | right;
overflow:hidden | scroll | auto; （不是visible）
display:inline-block | table-cell | table-caption | flex | grid;（非none 非inline 非block）
设置绝对定位: position: absolute | fiexed;（非relative）

BFC的作用

解决margin重叠问题：由于BFC是一个独立的区域，内部元素和外部元素互不影响，将两个元素变为BFC，就解决了margin重叠问题
创建自适应两栏布局：可以用来创建自适应两栏布局，左边宽高固定，右边宽度自适应。
解决高度塌陷问题：在子元素设置浮动后，父元素会发生高度的塌陷，也就是父元素的高度为0解决这个问题，只需要将父元素变成一个BFC。

问题解决

Margin重叠问题

html 复制代码

<div class="div1"></div>
<div class="div1"></div>

css 复制代码

.div1 {
  margin-bottom: 20px;
  width: 100px;
  height: 100px;
  background-color: red;
}
.div2 {
  margin-top: 20px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

会导致上下两个div的margin重合：

html 复制代码

<style>
  .container {
    overflow: hidden;//将它变成BFC
  }
  .div1 {
    margin-bottom: 20px;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .div2 {
    margin-top: 20px;
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>
<body>
  <div class="container">
    <div class="div1"></div>
  </div>
  <div class="container">
    <div class="div2"></div>
  </div>
</body>

Margin塌陷问题

html 复制代码

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
  }
  .box1 {
    width: 40px;
    height: 40px;
    margin-top: 50px;
    background-color: lightgreen;
  }
</style>

<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>

父元素margin-top:50px，子元素没有margin-top，造成margin塌陷

给父元素变成BFC即可；

html 复制代码

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: pink;
    overflow: hidden;
  }
  .box1 {
    width: 40px;
    height: 40px;
    margin-top: 50px;
    background-color: lightgreen;
  }
</style>

<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>

高度塌陷

html 复制代码

<style>
  .father {
    width: 200px;
    background-color: lightseagreen;
  }
  .child1 {
    width: 200px;
    height: 200px;
    float: left;
    background-color: red;
  }
  .child2 {
    width: 200px;
    height: 200px;
    float: left;
    background-color: pink;
  }
</style>
<div class="father">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

会发现父元素的高度为0，造成了高度塌陷；

html 复制代码

<style>
  .father {
    width: 200px;
    height: 500px;
    background-color: lightseagreen;
    overflow: hidden;
  }
  .child1 {
    width: 200px;
    height: 200px;
    float: left;
    background-color: red;
  }
  .child2 {
    width: 200px;
    height: 200px;
    float: left;
    background-color: pink;
  }
</style>
<div class="father">
  <div class="child1"></div>
  <div class="child2"></div>
</div>