BFC块级格式化上下文

定义

BFC(Block Formatting Context)块级格式化上下文。是CSS渲染的一块独立区域，在这块区域内的元素布局不会影响到外面，同样，外面的元素布局也不会影响到里面。

规则

• 内部的Box会在垂直方向上一个接一个的放置
• 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
• 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
• BFC的区域不会与float的元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

创建方式

• 根元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC
• position的值为absolute或fixed

作用

一、解决父元素高度塌陷

当父元素中的子元素设置为浮动时，这个子元素的高度将不包括在父元素的高度内，换句话说就是，父元素的高度不包括该子元素的高度。那么这样就会造成一个问题，如果父元素不设置高度小于该子元素那么就会造成高度塌陷，子元素的高度将超过父元素。

二、解决外边距重叠

两个相邻的元素分别设置margin如果他们不再一个BFC内，则他们设置的margin值将会重叠一部分

<div class="b3 inner">3</div>
<div class="b4 inner">4</div>

.inner {
  width: 100px;
  height: 100px;
  background-color: yellowgreen;
  border: 1px solid rgb(54, 11, 134);
  margin:100px 0;
}

我们把第二个元素放在一个div内，为它创建一个新的BFC，则会解决该问题

 <div class="b3 inner">3</div>
  <div class="outer">
    <div class="b4 inner">4</div>
  </div>

.outer{
  overflow: hidden;
}

三、自适应两栏布局

可以通过给元素创建BFC的方式，来创建两栏布局。

 <div class="outer">
    <div class="b3 inner">3</div>
    <div class="b4 inner">4</div>
  </div>

.outer{
  width:500px;
  height:600px;
  position: relative; 
}
.b4 {
  width:400px;
  height: 300px;
  background-color: aquamarine;
}
.b3 {
  float: left;
  width: 100px;
  height: 100px;
  background-color: yellowgreen;
  border: 1px solid rgb(54, 11, 134);
}

通过以上的代码我们创建了两个相邻的div，并且一个浮动在另一个之上。如果我们想要实现自适应两栏布局，就需要为没有浮动的元素创建BFC。

.b4 {
  width:400px;
  height: 300px;
  background-color: aquamarine;
  overflow:hidden;
}