BFC讲解及其作用

原文地址：什么是BFC？看这一篇就够了，这里只是针对原文做了点修改。

一、关于BFC

BFC定义

BFC(Block formatting context)：“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

什么是box

Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

• block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
• inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

Formatting Context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC的布局规则

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
• 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算。

如何创建BFC

1. float的值不是none。
2. position的值不是static或者relative。
3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4. overflow的值不是visible

总结：Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

二、BFC的作用

1. 解决外边距重叠（只利用BFC来解决）
   垂直方向外边距合并的规则
   （1）两个外边距都是正的，则按最大的那个来计算
   （2）两个外边距都是负的，则按绝对值最大的来计算
   （3）两个外边距一正一负，则绝对值相加计算

   .outer{
   	width: 200px;
   	height: 200px;
   	background-color: #bfa;
   }
   .inner{
   	width: 100px;
   	height: 100px;
   	background-color: yellow;
   	margin-top: 100px;
   }
   

   
   解决方式：创建一个BFC,内部元素的布局不会影响到外面的元素

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	/*overflow: hidden;*/
}
.inner{
	width: 100px;
	height: 100px;
	background-color: yellow;
	margin-top: 100px;
}
.wrapper{
	overflow: hidden;
}

<div class="outer">
	<div class="wrapper">
		<div class="inner">
		</div>
	</div>
</div>

2. 自适应两栏布局

.left{
	background-color: yellow;
	width: 200px;
	height: 100px;
	float:left;
}
.right{
	background-color: blue;
	height: 250px;
}

<div class="left"></div>
	<div class="right"></div>

因为–BFC的区域不会与float box重叠。所以用overflow:hidden来触发BFC。但是不能对right用float:right，否则会没有宽度，除非right中有内容来撑起宽度。

.left{
	background-color: yellow;
	width: 200px;
	height: 100px;
	float: left;
}
.right{
	background-color: blue;
	height: 250px;
	overflow: hidden;
}

3. 解决高度塌陷

.outer{
	width: 200px;
	background-color: #bfc;
	border: 10px solid red;
}
.inner{
	width: 100px;
	height: 100px;
	border: 10px solid yellow;
	background-color: black;
	float: left;
}

<div class="outer">
	<div class="inner">
		
	</div>
</div>

根据-- 计算BFC的高度时，浮动元素也参与计算。 所以我们给父元素激活BFC,此时BFC的高度就是浮动子元素inner的高度。

.outer{
	width: 200px;
	background-color: #bfc;
	border: 10px solid red;
	overflow:hidden;
}
.inner{
	width: 100px;
	height: 100px;
	border: 10px solid yellow;
	background-color: black;
	float: left;
}