请描述 BFC(Block Formatting Context) 及其如何工作

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【 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.参考文献

参考一：MDN

参考二：什么是BFC

8.更多讨论
什么是IE的haslayout

hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽高)，要么由其containing block来组织和尺寸计算。而IFC（即没有拥有布局）而言，则是元素无法对自身内容进行组织和尺寸计算，而是由自身内容来决定其尺寸（即仅能通过line-height设置内容行距，通过行距来支撑元素的高度；也无法通过width设置元素宽度，仅能由内容来决定而已）

PPT链接