定义
block formatting context，块级格式化上下文，相对应的还有IFC（inline formatting context）,内联格式化上下文。
原则：如果一个元素具有BFC，那么其子元素，不会影响外部元素，计算高度，会加上浮动元素的高度。
创建BFC
-
float值不为none -
position值不为 relative 和 static -
overflow值不为visible -
display值为 table-cell、table-caption 和 inline-block 中的任何一个
块状元素流体特性 自适应布局
块状元素会水平自动铺满外部容器
<div class="main">
<div class="left">1</div>
<div class="right">2</div>
</div>
//css
.left {
width: 100px;
height: 100px;
background: red;
float: left;
}
.right {
background: green;
height: 100px;
margin-left: 110px;
}
image.png
可以实现自适应，主要是通过块级元素流体特性。
块级元素和浮动元素如果是兄弟关系，则是覆盖关系
缺点，==不太通用，如果需要设置间距，需要知道外部元素的宽度等，以及这只的间距也不一定相同；==
元素BFC特性实现自适应布局
<div class="main">
<div class="float">1</div>
<div class="right bfc">2</div>
</div>
//css
.bfc {
overflow: hidden;
}
.right {
background: green;
height: 100px;
}
.float {
width: 100px;
height: 100px;
background: red;
float: left;
margin-right: 10px;
}
bfc后，==元素形成了自己的封闭上下文==，元素原本的流体特性保留，==自动退避浮动元素宽度的距离==，分别形成自己的结界。
bfc自适应情况以及兼容
1.float:left浮动元素本身BFC化，浮动元素失去了本身的流体自适应性，无法实现自动填满容器的自适应布局
2.position:absulute 脱离文档流
3.overflow:hidden 块状元素的流体自适应性保存很好，附上BFC独立区域特性，只是会溢出裁剪，确定不会被裁剪的情况下，可以通过这个进行自适应布局
4.display:inline-block只适用于低级IE浏览器
5.display:table-cell 内容按照表格宽度来，不会超过表格宽度，需要设置一个很大的宽度，不去影响右侧的布局，从而达到多栏自适应效果，这个是用BFC实现自适应布局很好的实践，此处兼容IE8+
display: table-cell; width: 9999px;
多栏目平分自适应布局
<div class="main">
<img src="./2.jpg" alt="" class="float-left">
<div class="bfc-content">学习BFC，BFC很强大哦，好好学前端，前端很强大，加油，大兄弟！！</div>
<div class="bfc-content">学习BFC，BFC很强大哦，好好学前端，前端很强大，加油，大兄弟！！学习BFC，BFC很强大哦，好好学前端，前端很强大，加油，大兄弟！！</div>
</div>
.float-left {
float: left;
}
.bfc-content {
display: table-cell;
width: 9999px;
}
image.png
display:table-cell与大小不固定元素的垂直居中
<div class="table">
<img src="./2.jpg" alt="">
</div>
.table {
display: table-cell;
width: 500px;
height: 500px;
border: 1px solid #ccc;
text-align: center;
vertical-align: middle;
}
image.png
