BFC什么是BFC 它是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局 BFC的规则 BFC就是一

什么是BFC

Block Formatting Context 块级格式化上下文它是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局

BFC的规则

BFC就是一个块级元素，块级元素会在垂直方向一个接一个排列
BFC就是页面中一个隔离的独立容器，容器内的标签不会影响到外部标签
垂直方向的距离由margin决定，属于同一个BFC的两个相邻标签外边距会发生重叠
计算BFC的高度时，浮动元素也参与计算

如何触发BFC

根元素(< html >)
浮动元素(float不为none)
绝对定位元素(position为absolute或fixed)
display为inine-block、table-cell、table、flex、grid...
overflow不为visible的块元素

BFC的作用(解决了什么问题)

避免外边距重叠

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

    .box1 {
      width: 100px;
      height: 100px;
      background-color: orange;
      margin-bottom: 100px;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin-top: 100px;
    }

现在两个div上下间距margin为100px。margin-top和margin-bottom会合并成单边距，其大小为最大值中的一个
解决：各自的父元素添加属性overflow:hidden。为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响更改

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

.contaner {
    overflow: hidden;
}
.box1 {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin-bottom: 100px;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: pink;
  margin-top: 100px;
}

2.解决float高度塌陷

  <div class="container">
    <div class="box"></div>
  </div>

  .container {
    border: 1px solid red;
  }
  .box {
    float: left;
    width: 100px;
    height: 100px;
    background-color: orange;
  }

浮动元素会脱离文档流，会出现父元素高度塌陷
解决：给父元素设置属性overflow:hidden。缺点：当文本过长，且包含过长英文时，会出现英文文本被隐藏的情况

  .container {
    border: 1px solid red;
    overflow: hidden;
  }

3.阻止元素被浮动元素覆盖浮动的盒子脱离文档流会覆盖住box2

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

  .box1 {
    float: left;
    width: 90px;
    height: 90px;
    background-color: pink;
  }
  .box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
  }

解决：在不浮动的盒子里添加属性overflow:hidden

  .box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
    overflow: hidden;
  }

最终效果