一、块级格式化上下文

1.引言

全称Block Formatting Context，简称BFC，它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。
创建BFC渲染区域，有三种方式
1.根元素
2.浮动和绝对定位元素
3.overflow不等于visible的块盒
使用时按对布局影响最小的方式使用

2.作用

1. 不同的BFC区域，它们进行渲染时互不干扰
2. 创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部

3.区域关系

二、应用

1. 常规流块盒在水平方向上，必须撑满包含块

<style>.container{background: lightblue;/* position: absolute; *//* float: left; *//* overflow: hidden; */}.clearfix{overflow: hidden;/* 副作用最小的方式 */}.item {float: left;width: 200px;height: 200px;margin: 20px;background: red;}
</style>
<div class="container clearfix"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</div>

因为item浮动脱离文档标准流，那么让它的父元素创建BFC渲染区域，即可以达到被子元素撑开的效果。
2. 常规流块盒在包含块的垂直方向上依次摆放

<style>.float{width: 200px;height: 200px;margin: 20px;background: red;float: left;}.container{height: 500px;background: #008c8c;/* bfc */overflow: hidden;}
</style>
<div class="float"></div>
<div class="container"></div>

正常情况下，container元素应该在自适应屏幕宽度，float元素“浮动”在它身上，创建BFC渲染区域后可以看到float元素，就变成各占部分。
3. 常规流块盒若外边距无缝相邻，则进行外边距合并

<style>.container{background: #008c8c;height: 500px;margin-top: 30px;overflow: hidden;}.child{height: 100px;margin: 50px;background: red;}
</style>
<div class="container"><div class="child"></div>
</div>

正常情况，会产生margin塌陷情况，两者外边距会合并出距离顶部最高的值，一同距离顶部50px，父级创建BFC后解决该问题。
4. 常规流块盒的自动高度和摆放位置，无视浮动元素

<style>.container{float: left;background: #008c8c;}.item{position: absolute;top: 0;left: 0;margin: 20px;width: 200px;height: 200px;background: red;}
</style>
<div class="container"><div class="item"></div>
</div>

父级坍塌