大家好，这里是修真院前端小课堂，今天给大家分享的是
《请描述 BFC (Block Formatting Context) 及其如何工作》
1. 背景介绍
在解释 BFC 之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指 BFC 中的 FC。FC 是 formatting context 的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的 FC 有 BFC、IFC，还有 GFC 和 FFC。BFC 是 block formatting context。
2. 知识剖析
1.BFC 是什么
定义：一个块级格式化上下文 [BFC] 是可视化 CSS 渲染网页的一部分，它是一个区域，块级布局，相互浮动在这个区域发生。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
2. 怎样才能形成 BFC
float 的值不为 none。
overflow 的值不为 visible
display 的值为 table-cell, table-caption, inline-block 中的任何一个
position 的值不为 relative 和 static
css3 中 flex boxes
fieldset 元素
3.BFC 的作用
包含浮动元素 (清除浮动) BFC 会根据子元素的情况自适高度，这个特性是对父元素使用 overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的
不被浮动元素覆盖 浮动元素会无视兄弟元素的存在， 覆盖在兄弟元素的上面， 为该兄弟元素创建 BFC 后可以阻止这种情况的出现
4.BFC 规则
内部的 Box 会在垂直方向，从顶部开始一个接一个地放置
Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生叠加
每个元素的 margin box 的左边， 与包含块 border box 的左边相接触 (对于从左往右的格式化，否则相反)。即使存在浮动也是如此
BFC 的区域不会与 float box 叠加
3. 常见问题
元素重叠
浮动坍塌的问题
margin 重叠
4. 解决方案
1, 图片默认是 inline 水平的，而 vertical-align 对块状水平的元素无感。因此，我们只要让图片 display 水平为 block 就可以了，我们可以直接设置 display 或者浮动、绝对定位等
2,BFC 可以包含浮动的元素 这也正是上面使用 overflow: hidden 与 overflow: auto 方法闭合浮动的原理，使用 overflow: hidden 或 overflow: auto 触发浮动元素父元素的 BFC 特性，从而可以包含浮动元素，闭合浮动。W3C 的原文是 “’Auto’ heights for block formatting context roots”，也就是 BFC 会根据子元素的情况自动适应高度，即使其子元素中包括浮动元素
5. 编码实战
见视频。
6. 拓展思考
.aside{
width:100px;
height:150px;
float:left;
background:#f66;
}
.main{
height:200px;
background:#fcc;
position:absolute;
width:200px;
}
absolute 应该会产生 bfc，为什么这两个元素会重叠？
7. 参考文献
8. 更多讨论
什么是 IE 的 haslayout
hasLayout 可以简单看作是 IE5.5/6/7 中的 BFC (Block Formatting Context)。也就是一个元素要么自己对自身内容进行组织和尺寸计算 (即可通过 width/height 来设置自身的宽高)，要么由其 containing block 来组织和尺寸计算。而 IFC（即没有拥有布局）而言，则是元素无法对自身内容进行组织和尺寸计算，而是由自身内容来决定其尺寸（即仅能通过 line-height 设置内容行距，通过行距来支撑元素的高度；也无法通过 width 设置元素宽度，仅能由内容来决定而已）