CSS 盒模型、BFC、IFC、GFC、FFC
基本慨念
内容区域（content）是包含元素真实内容的区域。它通常包含背景、颜色或者图片等，位于内容边界的内部，它的大小为内容宽度或 content-box 宽及内容高度或 content-box 高。
如果 box-sizing 为默认值，width、min-width、max-width、height、min-height、max-height控制内容大小。
内边距区域（padding）延伸到包围 padding 的边框。如果内容区域设置了背景、颜色或者图片，这些样式将会延伸到 padding 上。它位于内边距边界内部，它的大小为 padding-box 宽与 padding-box 高。
内边距与内容边界之间的空间可以由 padding-top、padding-right、padding-bottom、padding-left 和简写属性 padding 控制。
边框区域（border）是包含边框的区域，扩展了内边距区域。它位于边框边界内部，大小为 border-box 宽和 border-box 高。
由 border-width 及简写属性 border 控制。
外边距区域（margin）用空白区域扩展边框区域，以分开相邻元素。它的大小为 margin-box 的高宽。
外边距区域大小由 margin-top、margin-right、margin-bottom、margin-left 及简写属性 margin 控制。
注意：对于非替换行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（行高）由 line-height 属性决定。
标准盒模型：width = content
IE 盒模型：width = content + 2 * padding + 2 * border
CSS 如何设置这两种模型
用到了 CSS3 的属性 box-sizing
/* 标准模型 */
box-sizing: content-box;
/*IE模型*/
box-sizing: border-box;
JS 获取宽高
通过 JS 获取盒模型对应的宽和高，有一下几种方式，以下用 dom 来表示获取的 HTML节点：
1. dom.style.width/height
这种方式只能取到 dom 元素内联样式所设置的宽高，也就是说如果该节点的样式是在 style 标签中或外联的 CSS 文件中设置的话，通过这种方式是获取不到 dom 的宽高的。
2. dom.currentStyle.width/height
这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。到这种方式只有 IE 支持。
3. window.getComputedStyle(dom).width/height
这种方式的原理和 2 一样，这个可以兼容更多的浏览器，通用性更好。
4. dom.getBoundingClientRect().width/height
这种方式是根据元素在视窗中的绝对位置来获取宽高的。
5. dom.offsetWidth/offsetHeight
包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。
边距重叠与BFC
边距重叠
边距重叠是指两个或多个盒子（可能相邻也可能嵌套）的相邻边界重合在一起而形成一个单一边界。
两个或多个块级盒子的垂直相邻边界会重合，它们的边界宽度是相邻边界宽度的最大值。注意水平边界是不会重合的。
边距重叠例子
父子元素的边界重叠
<style type="text/css">
.parent {
background: #E7A1C5;
height: 200px; width: 200px;
}
.child {
background: #C8CDF5;
height: 100px;
width: 100px;
margin-top: 10px;
}
</style>
<section class="parent">
<article class="child"></article>
</section>
期待的效果：
实际效果：
这里父元素的高度不是110px，而是100px，在这里发生了高度坍塌。原因是如果块元素的 margin-top 与它的第一个子元素的 margin-top 之间没有 border、padding等来分隔，或者块元素的 margin-bottom与它最后一个子元素的 margin-bottom 之间没有 border、padding、height、min-height、max-height 分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。
兄弟元素的边界重叠
<style>
#margin {
background: #E7A1C5;
overflow: hidden;
width: 300px;
}
#margin>p {
background: #C8CDF5;
margin: 20px auto 30px;
}
</style>
<section id="margin">
<p>1</p>
<p>2</p>
<p>3</p>
</section>
可以看到 1 和 2 之间、2 和 3 之间的间距不是 50px ，发生了边距重叠是取它们之间的最大值 30px.
空元素的边界重叠
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
BFC 原理
解决上述问题的其中一个办法就是创建 BFC。BFC 的全称为 Block Formatting Content，即块级格式化上下文。一个 BFC 有如下特性：
1. 处于同一个 BFC 中的元素相互影响，可能会发生 margin collapse
2. BFC 在页面上是一个独立的容器，容器里面的子元素不会影响到外面的元素，反之亦然
3. 计算 BFC 的高度时，考虑 BFC 所包含的所有元素，包括浮动元素也参与计算
4. 浮动盒的区域不会叠加到 BFC 上
创建 BFC
创建 BFC 的方法如下：
1. 浮动（ float 的值不为 none ）
2. 绝对定位元素（ position 的值为 absolute 或 fixed ）
3. 行内块（ display 为 inline-block ）
4. 表格单元（ display 为 table、table-cell、table-caption 等 HTML 表格相关的属性 ）
5. 弹性盒（ display 为 flex 或 inline-flex ）
6. overflow 不为 visible
BFC 使用场景
1. 防止垂直 margin 重叠
父子元素的边界重叠得解决方案：
在父元素上加上 overflow: hidden; 使其成为 BFC。
.parent {
background: #E7A1C5;
overflow: hidden;
}
兄弟元素的边界重叠，在第二个子元素创建一个 BFC 上下文：
<section id="margin">
<p>1</p>
<div style="overflow:hidden;">
<p>2</p>
</div>
<p>3</p>
</section>
2. 清除内部浮动
<style>
#float {
background: #FEC68B;
}
#float .float {
float: left;
}
</style>
<section id="float">
<div class="float">我是浮动元素</div>
</section>
父元素 #float 的高度为 0，解决方案为：为父元素创建 BFC，这样浮动子元素的高度也会参与到父元素的高度计算：
#float {
background: #FEC68B;
overflow: hidden; /*这里也可以用float:left*/
}
3. 自适应两栏布局
<section id="layout">
<style>
#layout {
background: red;
}
#layout .left {
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right {
height: 110px;
background: #ccc;
}
</style>
<!--左边宽度固定，右边自适应-->
<div class="left">左</div>
<div class="right">右</div>
</section>
在这里设置右边的高度高于左边，可以看到左边超出的部分跑到右边去了，这是由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样导致的。
解决方案为：给右侧元素创建一个 BFC，原理就是 BFC 不会与 float 元素发生重叠。
#layout .right {
height: 110px;
background: #ccc;
overflow: auto;
}
IFC 原理
全称 Inline Formatting Contexts，也就是"内联格式化上下文"。
创建 IFC
块级元素中仅包含内联级别元素。
当 IFC 中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个 IFC。
IFC 的布局规则：
1. 子元素水平方向排列，并且垂直方向起点为元素顶部
2. 子元素只会计算水平方向元素空间(margin padding border)，不会计算垂直方向
3. 在垂直方向上，子元素会以不同形式来对齐(vertical-align)
4. 能把一行上的框全部包含进去的一个矩形区域，被称为该行的行框(line box)。行框的宽度由包含块(containing box)和与其中的浮动元素来决定
5. IFC 中的 "line box" 一般紧贴其包含块，但 float 元素会优先排列
6. IFC 中的 "line box" 高度由 CSS 行高计算规则来确定，同个 IFC 下的多个 "line box" 高度可能会不同
7. 当内联元素的总宽度小于包含它们的 "line box" 时，其水平渲染规则由 "text-align" 属性值来决定
8. 当一个 "line box" 超过父元素的宽度时，它会被分割成多个 box，这些 box 分布在多个 "line box" 中。如果子元素未设置强制换行的情况下，"inline box" 将不可被分割，将会溢出父元素
IFC 使用场景：
1. 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
2. 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
GFC 原理
GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
和 table 的区别：同样是一个二维表格，gridLayout 会以更加丰富的属性来控制行列、控制对齐以及更精细的控制语义
FFC 原理
FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，display 值为flex 或者 inline-flex 的元素将会生成自适应容器（flex container）。
Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。
伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。
