BFC机制

BFC机制

一、什么是BFC机制

BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

二、触发 BFC机制 的条件

1、当添加了float属性，且float不为none时
2、添加定位，position值为absolute或fixed
3、将元素强制转换类型（display：inline-block，table-cell，table-caption）
4、有根元素或者存在父元素，或其他包含元素
5、块级元素添加overflow属性，且属性不能为visibility
【注】：浮动元素不会影响BFC的页面布局，且在清除浮动时只能将BFC前面的浮动元素清除掉。

三、BFC的布局规则

1、内部的块级元素在垂直方向上一个接一个的放置
2、块级元素垂直方向的margin会重叠，最大值覆盖最小值（两个相邻的元素）
3、每个元素的margin box的左边与包含块的border box左边接触（就算是浮动也是如此）
4、BFC区域不会与float重叠
5、BFC是一个独立的区域（容器），容器内的子元素不会影响外面的元素
6、计算BFC高度是，浮动元素也要加在里面
7、只应用与BFC的子级元素，对产生BFC的元素不适用

四、应用场景

1、自适应两栏布局

.div-left{
	width：100px；
	height：100px；
	background：skybule；
	float：left；
}
.div-right{
	background：pink；
	height：100px；	
	overflow：hidden；
	margin-left：120px；/*margin为左边宽度+想要设置margin*/
} 

2、阻止margin重叠（使用padding或在其中一个元素加父元素并并使他成为一个BFC）

.box{
	width：400px；
	height：400px；
	background：blue；
	overflow：hidden；/*使父元素形成BFC*/
}
.div{
	width：100px；
	height：100px；
	background：red；
	margin：20px；
}

效果如下图：
3、可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)

.box{
	background：red；
	overflow：hidden；
}
.box li{
	width：100px；
	height：100px；
	margin：10px；
	border：1pxsolid#ddd；
	float：left；
	display：block;
}

效果如下：
可以阻止元素被浮动元素覆盖