谈谈BFC

1、BFC概念

BFC: 块级格式化上下文

个人理解: BFC是形成独立的渲染区域，内部元素渲染不会影响外界元素

2、BFC特性

• BFC是页面上的独立容器，容器里面的子元素不会影响外面元素
• BFC内部的块级盒会在垂直方向上一个个排列
• ⭐计算BFC高度时，子元素如果浮动也会参与计算
• ⭐浮动盒子不会与BFC重叠
  
  

3、触发BFC

1. float为 left/right
2. overflow为 hidden/scroll/auto
3. position为 absolute/fixed
4. display为 inline-block/table-cell/table-caption
   
   

4、BFC应用

margin塌陷：【仅在垂直方向】

问题描述：
父子盒子嵌套，父在内容，边框，padding-top三个条件没有一个满足，则子盒子设置 margin-top，父盒子会掉下来
原理：子元素找不到父元素的border或者padding,内容,就会与父元素上边距重叠，margin-top就会让父元素掉下来

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .father {
    width: 200px;
    height: 200px;
    background-color: pink;
  }
  .son {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    background-color: skyblue;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>

此时就会导致外边距塌陷问题

怎么解决？

//给父元素开启BFC
 .father {
   ...
   overflow: hidden 
  }

margin合并【仅在垂直方向】

此时，就会导致外边距合并问题

那么怎么解决？ 给任意盒子外面套一个盒子，给这个盒子开启BFC，使其内部元素不能影响外界元素即可

 <style>
      * {
        margin: 0;
        padding: 0;
      }
      .a {
        height: 50px;
        margin-bottom: 100px;
        background-color: pink;
      }
      .box {
        overflow: hidden;
      }
      .b {
        height: 50px;
        margin-top: 50px;
        background-color: skyblue;
      }
    </style>
    
    <div class="a">上盒子</div>
    <div class="box">
      <div class="b">下盒子</div>
    </div>

此时，边距就是我们所想要的

浮动导致的高度塌陷

需求：容器未设高度，需要内容撑大盒子，容器内内容左浮动，

<style>
  * {
    padding: 0;
    margin: 0;
  }
  .box {
    background-color: silver;
  }
  .a {
    width: 100px;
    height: 100px;
    float: left;
    background-color: pink;
  }
 </style>
 
 <div class="box">
      <div class="a">内容区域</div>
      <span>文字区域</span>
 </div>
    

此时效果是什么样呢？

原因：浮动脱标，盒子检测不到图片高度，所以塌陷
解决方案，父盒子开启BFC，封闭空间，浮动内容也会算进来，这样盒子就有高度了

//加上这一句即可，父盒子开启BFC
 .box {
        overflow: hidden;
      }