CSS中的BFC(块格式化上下文)

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的部分，是块级盒布局发生的区域，也是浮动元素与其他元素交互的区域。

一、BFC的产生

1、根元素
2、float属性不为none
3、overflow不为visible
4、position为absolute、fixed
5、display为inline-block、flex、inline-flex
6、dsiplay:flow-root;//触发BFC（新出的）

二、BFC特性

1、内部的Box会在垂直方向，一个接一个地放置。

2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

3、BFC的区域不会与float box重叠。

4、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

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

三、BFC用处

1、清除浮动

HTML：

  <div class="wrap">
    <section>1</section>
    <section>2</section>
  </div>

CSS：

.wrap {
  border: 2px solid red;
  width: 250px;
}

section {
  background-color: green;
  float: left;
  width: 100px;
  height: 100px;
}

可以看到，由于子元素都是浮动的，受浮动影响，边框为红色的父元素的高度塌陷了。

浮动

解决方案：
为 .wrap 加上 overflow: hidden;使其形成BFC，根据BFC特性第5条，计算高度时就会计算float的元素的高度，达到清除浮动影响的效果。

清除浮动

2. 布局：自适应两栏布局

HTML：

<div>
  <aside></aside>
  <main>文字是我是文字文字是我是文字文字是我是文字文字是我是文字文字是我是文字文字是我是文字文字是我文字是我是文字</main>
</div>

CSS：

div {
  width: 200px;
}

aside {
  background-color: red;
  float: left;
  width: 100px;
  height: 50px;
}

main {
  background-color: green;
}

可以看到右侧元素的一部分跑到了左侧元素下方。

文字在下方

解决方案：
为main设置 overflow: hidden;触发main元素的BFC，根据BFC特性第4条，BFC的区域是独立的，不会与页面其他元素相互影响，且不会与float元素重叠，因此就可以形成两列自适应布局。

自适应两栏布局

3. 防止垂直margin合并

HTML：

<section class="top">上</section>
<section class="bottom">下</section>

CSS：

section {
  background-color: green;
  margin-bottom: 100px;
  width: 100px;
  height: 100px;
}

.bottom {
  margin-top: 100px;
}

margin合并

可以看到，明明.top和.bottom中间加起来有200px的margin值，但是我们只能看到100px。这是因为他们的外边距相遇发生了合并。

解决方案：
为其中一个元素外面包裹一层元素，并为这个外层元素设置overflow: hidden;使其形成BFC。因为BFC内部是一个独立的容器，所以不会与外部相互影响，可以防止margin合并。

HTML：

  <div class="bfc">
    <section class="top">上</section>
  </div>
  <section class="bottom">下</section>

CSS：

.bfc{
  overflow: hidden;
}

其中一个元素外层添加div

四、内联格式化上下文(Inline formatting contexts)

IFC也是一种布局规则
块容器盒里面只有行级元素的时候，自动生成 IFC