经常用但是不知道什么是BFC？

BFC学习

block formatting context 块级格式上下文

简单理解：

一个独立容器，内部布局不会受到外面的影响

形成条件：

1.浮动元素：float除none之外的值

2.绝对定位：position:absolute,fixed

3.display:inline-block,table-cell,table-caption,flex

4.overflow除visible之外的值（hidden,auto,sccroll)

5.body根元素

BFC特性

1.内部的盒子会在垂直方向上一个接一个的放置；他这里指的是很多个BFC的摆放

2.垂直方向上的距离由margin决定，同一个BFC中的两个相邻的标签外边距会发生重叠

前两点其实就是同一个BFC内部盒子和普通外部盒子排列一样，也有margin重叠的问题

      .float-item {
        width: 100%;
        height: 200px;
        background-color: greenyellow;
        margin: 20px;
      }
      .float-father {
        overflow: hidden;
      }

    <div class="float-father">
      <div class="float-item">1</div>
      <div class="float-item">2</div>
    </div>

3.BFC的区域不会与float的元素区域重叠

4.BFC盒子里面与外面互不影响

5.计算 BFC 的高度时，浮动元素也参与计算

前两点就是它内部的盒子摆放规则和外面普通盒子一样，我们主要利用的是后三点

作用：

1 利用BFC避免margin重叠

情景：正常情况下父子盒子的margin会发生重叠，他会取大的；这时我让父盒子变为BFC，他们的边距就不会重叠了；兄弟盒子也一样，他们上下边会取大的，我们可以将一个盒子用父盒子包起来，给父盒子添加overflow:hidden

    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .first {
        background-color: pink;
        height: 100px;
        margin-bottom: 20px;
      }
      .second {
        background-color: skyblue;
        height: 100px;
        margin-top: 50px;
      }
    </style>
  <body>
    <div class="first"></div>
    <div class="second"></div>
  </body>

给一个盒子包一层，并将父盒子变为BFC

      .father {
        overflow: hidden;
      }

    <div class="first"></div>
    <div class="father">
      <div class="second"></div>
    </div>

避免父子盒子margin重叠：

      .father {
        overflow: hidden; /* 让父盒子变为BFC就不会重叠了 */
        background-color: skyblue;
        margin-bottom: 20px;
      }
      .child {
        height: 20px;
        background-color: pink;
        margin-bottom: 50px;
      }
    <div class="father">
      <div class="child"></div>
    </div>
    <div>这是底下的盒子</div>

2 清除浮动，防止盒子塌陷；塌陷的原因是父盒子没有高度，over:flow能够清除浮动的原因：他触发了父盒子的BFC,由于计算BFC的高度时，浮动元素也参与计算

如果子元素是position:absolute,父元素也是坍塌的,父元素overflow:hidden是撑不开的

      .float-item {
        float: left;
        width: 100%;
        height: 200px;
        background-color: greenyellow;
      }
      .float-father {
        overflow: hidden; /* 给父元素变为BFC解决高度坍塌问题，不加父盒子高度就撑不开，为0了 */
      }
    <div class="float-father">
      <div class="float-item"></div>
    </div>

3 阻止元素被浮动元素所覆盖;让被覆盖的元素成为BFC

    <style>
      .item {
        font-size: 16px;
        height: 200px;
        border: 1px solid red;
      }
      .left {
        float: left;
        background-color: pink;
        width: 200px;
      }
      .right {
        background-color: skyblue;
        width: 360px;
         display:inline-block /* 将他变为BFC就不会被左侧浮动元素遮挡了 */
      }
    </style>
  </head>
  <body>
    <div class="item left">
      左边的内容 左边的内容 左边的内容 左边的内容 左边的内容 左边的内容
      左边的内容 左边的内容 左边的内容 左边的内容 左边的内容 左边的内容
    </div>
    <div class="item right">
      开始右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容
      右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容
      右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容
      右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容
      右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容
    </div>

右边的元素被左边的所遮挡，可以将右边元素变为BFC