前端学习6 BFC（Block Formatting Context）

BFC，全称为Block Formatting Context（块级格式化上下文），是Web页面中的一个独立渲染区域，让处于BFC内部的元素与外部的元素相互隔离，确保内部元素的布局不会被外部元素影响。

1.触发BFC的条件

要创建一个BFC，你可以使用以下任一CSS属性：

1.overflow 不为 visible

2.float 属性不为 none

3.display 为 inline-block、flex、inline-flex、table-cell、grid、flow-root 或 table-caption

4.position 为 absolute 或 fixed

2.BFC的布局规则

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列。

BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签。

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

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

3.解决问题

3.1 相邻元素外边距合并

两个相邻元素都有外边局时，取大者。这是css的布局规则

  .box1{
    width: 100px;
    height: 100px;
    background: red;
    margin-bottom: 100px;
  }
.box2{
    width: 100px;
    height: 100px;
    background: deepskyblue;
    margin-top: 50px;
  }

box1和box2的间距为50px,要想实现box1和box2的间距为100px，我们要将其中一个box变成BFC。

1.其中一个元素包裹一层（div），并开启BFC。

2.给其中一个元素添加display: inline-block;,添加这个属性的原理是inline-block会创建一个行框来包裹元素，所以也能做到隔离的效果。

3.2 父子元素外边距塌陷

 .container{
    width: 300px;
    height: 300px;
    background: deepskyblue;
  }
  .box{
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 100px;
  }

container会被box一起带下来。

解决方法：为父元素开启BFC,让父元素形成独立渲染区域。

3.3 父元素高度塌陷问题

  .container{
    background: deepskyblue;
    border: 2px solid greenyellow;
  }
  .box1{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
  }

解决方法：为父元素开启BFC

3.4 浮动重叠问题

元素开启浮动后，脱离普通流（Normal flow 别称文档流或常规流），就会覆盖普通流元素。

 .box1{
    background: deepskyblue;
    width: 100px;
    height: 100px;
    float: left;//使用Float脱离文档流
  }
  .box2{
    width: 300px;
    height: 300px;
    background: red;
  }

box1会出现在box2的同一位置。

解决方法：为box2开启bfc。