格式化上下文
格式化上下文指的是元素所处的环境以及初始化。这里的初始化就是所谓的格式化（如手机的重置，恢复出厂设置），环境也称为上下文（不同的环境会有不同的结果）。
格式化上下文分为：
- 块格式化上下文
- 行内格式化上下文
从Overflow清除浮动开始
- visible：不对超出的内容做处理
- hidden：剪切超出内容（超出部分隐藏）
- scroll：不管内容是否超出，添加滚动条
- auto：超出的内容以卷动滚动条的方式呈现
<style>
.box{
overflow:hidden;
}
.item{
float:left;
width:100px;
height:100px;
background-color:pink;
}
</style>
<body>
<div class='box'>
<div class='item'></div>
</div>
</body>之所以给父元素.box添加overflow，是因为它的子元素.item浮动了。
如果不添加overflow，子元素.item就会超出.box的内容区域，也就是说父元素无法自适应子元素的大小。
Block Formatting Context
如标题，BFC就是它的缩写。他的中文名叫：块（级）格式化上下文
1.BFC的特点
- 在一个BFC中，块框会朝着垂直方向一个接一个地排列，从包含块的顶部开始。如果两个以及两个以上的框，在同一个块级格式化上下文中，那么他们相邻垂直方向的margin会合并成一个（按照较大的margin计算）。这里牵扯到margin外边距折叠的问题。
- 在BFC中，盒子从包含块最左边开始摆放。如果该元素创建了一个新的BFC，那么该盒子自身的宽度会因为浮动而变化，变化的大小与浮动元素相关。
- 在一个BFC中，囊括块里面的所有元素，但不囊括创建了新BFC的元素。
- 当一个框创建一个BFC时，他将包括浮动的元素（这也是为什么父元素设置overflow:hidden；可以自适应浮动元素的原因）。
2.如何创建一个BFC
- 根元素（html）自身就是一个BFC
- 浮动float值不为none
- 绝对定位position值为absolute、fixed的元素
- display值不为block的元素
- 表格单元格display为table-cell的元素
- 表格标题diaplay为table-caption的元素
- overflow值不为visible的元素
- 弹性盒子display为flex、inline-flex的元素
3.BFC特性验证
特性一： 垂直外边距折叠（margin折叠）
<style>
li{
margin:20px 0;
}
</style>
以上111111和222222之间的margin折叠了。
特性二：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.item1{
width: 100px;
height: 100px;
float: left;
margin-left: 10px;
background-color: pink;
}
.item2{
width: 200px;
height: 100px;
background: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="item1">item1</div>
<div class="item2">item2</div>
</div>
</body>
</html>
可以看到，item2还是靠到了包含块的最左边。
我们给item2加一个overflow:hidden;之后，创建了一个新的BFC
以上可以应用在哪里呢？可以应用在如下场面
如果不加overflow就会变成这样
但是我们想要的排版效果是这样
放在之前，我们可以只给橙色块加margin-left 这里需要注意的是，如果采用margin-left,则需要算上img块的宽度。，但是了解BFC之后，我们可以用overflow或者float来解决。具体代码不再赘述，原理就是把橙色块变成一个BFC;。
但是这种效果如果不设置宽度的话，用float和display:inline-block;实现，就会出现一些奇怪的问题，float和display:inline-block的话橙色块会掉下来
而使用display:block;
但是如果使用overflow：hidden就不会
其他特性不再一一验证。有兴趣可以自己验证。
挚谢阅读。
敬请期待下一期：
【CSS】浅谈css中格式化上下文BFC、IFC（二）