块级格式化上下文（BFC）

BFC（块级格式化上下文）

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

BFC的布局规则

• 内部的盒子会在垂直方向，一个一个地放置；
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；
• 每个元素的margin box的左边， 与包含块border box的左边相接触；
• BFC的区域不会与float box重叠；
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
• 计算BFC的高度时，浮动元素也参与计算；

哪些元素或属性能触发BFC

• 根元素
• float属性不为none
• position属性值为absolute或fixed
• display值为inline-block, table-cell, table-caption, flex, inline-flex
• overflow值不为visible

BFC的应用（布局）

两栏布局（左边固定中间自适应）

1、全部float利用calc函数

 .left{
	width: 100px;
	background: #f00;
	height: 100px;
	float: left;
}
.right{
	width: calc(100% - 100px);
	height: 100px;
	background: #0ff;
	float: left;
}

2、第一个float，第二个overflow：hidden

.left{
	width: 100px;
	background: #f00;
	height: 100px;
	float: left;
}
.right{
	height: 100px;
	background: #0ff;
	overflow:hidden;
}

三栏布局（左右固定中间自适应）（双飞翼布局、 圣杯布局）
1、全部float

.left{
	width: value；
	background: #f00;
	height: 100px;
	float: left;
}
.right{
	width: value;
	height: 100px;
	background: #0ff;
	float: left;
}
.center{
	width: calc(100% - 左右宽度的和);
	height: 100px;
	background: #0ff;
	float: left;

}
2、左右float，中间overflow：hidden 注意：盒子顺序问题，先左右，再中间

.left{
	width: value；
	background: #f00;
	height: 100px;
	float: left;
}
.right{
	width: value;
	height: 100px;
	background: #0ff;
	float: right;
}
.center{
	height: 100px;
	background: #0ff;
	overflow:hidden;

}
3、利用定位position

有时候会这样问：如何实现三栏布局（左右固定中间自适应），要求先加载中间区域再加载左右

.left{
	width: 200px;
	height: 200px;
	background: #f00;
	position: absolute;
	left: 0;
	top: 0;
}
.right{
	width: 200px;
	height: 200px;
	background: #f00;
	position: absolute;
	right: 0;
	top: 0;
}
.center{
	height: 300px;
	background: #ff0;
	margin: 0 200px;
}