1.FC是指什么?
Formatting context 是页面中的一块独立渲染区域，并且有一套渲染规则，它决定了其子元素的定位、相互关系及作用。
CSS2中最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
CSS3中多了( Flex Formatting Contexts )( FFC )和网格布局格式化上下文( GridLayout Formatting Contexts )( GFC )
因此：FFC包括BFC、IFC、FFC、GFC
2. BFC中的几个问题
2.1 BFC产生条件及布局规则
产生条件：
（1）根元素
（2）display 为inline-block
（3）position 为absolute或者fixed
（4）float 不为none
（5）overflow不为visible
布局规则：
(1) 内部的Box会在垂直方向，一个接一个地放置。正常文档流
(2) Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。margin重叠原理
(3) 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。浮动元素覆盖正常文档流原理
(4) BFC的区域不会与float box重叠。可用于两栏布局
(5) BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
(6) 计算BFC的高度时，浮动元素也参与计算。用于清除浮动
2.2 为什么浮动元素不能撑开父元素？
<html>
<body>
<div>
<div style="float:left; height:50px"><div>
</div>
</body>
</html>
根元素触发BFC, 根元素的子元素处于BFC中，但父级div并没有触发BFC，因此浮动元素撑开了html，但并没有撑开父级div。
3. IFC总结
line box的宽度由浮动情况和它的包含块决定。
line box的高度由line-height的计算结果决定。
行高
= 文本高度+ 上间距+ 下间距（上下间距是相等的）
=两行文字基线之间的距离
=两行文字顶线之间的距离
=两行文字中线之间的距离。
4. 参考
[1] 浅谈格式化上下文
[2] BFC神奇背后的原理
[3] IFC
[4] line-height
网友评论