CSS篇：BFC和IFC-一一网

BFC和IFC

Formatting Context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

BFC概念

BFC 即 Block Formatting Contexts (块级格式化上下文）
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素.
并且 BFC 具有普通容器所没有的一些特性。

BFC布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生合并。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

触发BFC

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex、table-caption或者inline-flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC特性及应用

1. 在同一个BFC下的相邻盒子外边距会发生合并

<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>
复制代码

避免发生外边距合并可以将其放在不同的BFC容器中

<div class="container">
    <p></p>
</div>
<div class="container">
    <p></p>
</div>
复制代码

.container {
    overflow: hidden;
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
复制代码

2. BFC 可以包含浮动的元素（清除浮动）

父级不设置高度的情况下，子元素浮动会造成高度塌陷，在浮动元素的父级设置overflow: hidden触发容器的BFC，便可以包裹浮动元素。

3. BFC 可以阻止元素被浮动元素覆盖（自适应两栏布局）

两个同级的元素，其中一个浮动时，会覆盖掉一部分另一个元素的一部分，但是文本信息不会被浮动元素所覆盖。
可以在被覆盖的元素中加入overflow: hidden，浮动的元素便不再覆盖另一个元素，可采用该方式实现自适应两栏布局，左边浮动元素宽度固定，右边触发BFC的元素不设宽度，让其内容自适应宽度

IFC概念

IFC（inline formatting context）：行内格式化上下文。·

IFC布局规则

盒子一个接一个地水平摆放，当容器宽度不够时就会换行
在水平方向上，这些盒的外边距、边框、内边距所占用的空间都会被计算，但行内盒的垂直的border，padding 与 margin 都不会撑开行盒的高度
在垂直方向上，这些盒可能会以不同形式来对齐，可通过 vertical-align 来设置，默认对齐为 baseline
每一行将生成一个行盒（line box），包括该行所有的盒子，行盒的宽度是由包含块和存在的浮动来决定
行盒一般左右边都贴紧其包含块，但是会因为浮动盒（float 元素）的存在而发生变化。浮动盒会位于包含块边缘与行盒边缘之间，这样行盒的可用宽度就小于包含块的宽度。
当所有盒的总宽度小于行盒的宽度，那么行盒中的水平方向排版由 text-align 属性来决定
当所有盒的总宽度超过一个行盒时，就会形成多个行盒，多个行盒相互之间垂直方向不能分离，不能重叠
当一个行内盒超过行盒的宽度时，它会被分割成多个盒，这些盒被分布在多个行盒里。如果一个行内盒不能被分割（比如只包含单个字符，或word-breaking机制被禁用，或该行内框受white-space属性值为nowrap或pre的影响），那么这个行内盒将溢出这个行盒
当一个行内盒发生分割时，分割处的 margins, borders 和 padding 不会有任何视觉效果（或者其他任何分裂，只要是有多个行盒）
行盒的高度由内部元素中实际高度最高的元素计算出来。每个行盒的高度由于内容不一样，所以高度也可能不一样
在一个行盒中，当他包含的内部容器的高度小于行盒的高度的时候，内部容器的垂直位置可由自己的 vertical-align 属性来确定