CSS布局相关基本概念
主要参考文档：
http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
https://www.cnblogs.com/dojo-lzz/p/3999013.html
测试例子：
https://codepen.io/icyfanfan/pen/yPvGQR
https://codepen.io/icyfanfan/pen/BmOOZv
理解文档流对于理解CSS布局其他相关概念很重要！！
文档流
- 将窗体自上而下划分为一行一行，在每行中从左至右排放元素，即为文档流
- 每个非浮动块级元素独占一行，浮动元素按规定(left or right)浮在行的一端，若当前行放不下，则起新行再浮动
- 内联元素不会独占一行，几乎所有元素(内联、块级等)都可以生成子行以摆放子元素
- 有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位。 但是在IE中浮动元素也存在于文档流中
- 浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间
基于文档流，理解定位模式：
相对定位， 即相对于元素在文档流中位置进行偏移。 但保留原占位。
绝对定位， 即完全脱离文档流， 相对于position属性非static值的最近父级元素进行偏移。
固定定位， 即完全脱离文档流， 相对于视区进行偏移
块级元素 BLOCK-LEVEL ELEMENT
标签：div
特点：
- 一个元素占一行
- 可设置宽度、高度、行高、边框、内外边距
- 未设置宽度的情况下，宽度自动填满外部容器
- 内部可以容纳其他块级元素或者内联元素
块状元素的流体特性
块状水平元素，如div元素，在默认情况下（未定义宽度、非浮动绝对定位等），水平方向会自动填满外部的容器；如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，实际内容区域会响应变窄。
内联元素 INLINE ELEMENT
标签：span
特点：
- 和其他内联特性元素在同一行上，行布局表现形式
- 不可设置宽度、高度、内外边距
- 宽度由内部元素决定，可以设置边框，但边框的表现是每一行都会被设置（对比块级元素）
- 内部可以容纳文本或其他内联元素
内联块级
display: inline-block
特点：
- 将对象呈现为inline对象，但是对象的内容作为block对象呈现。和其他内联对象同一行显示
- 和块级元素一样可以设置宽高、内外边距等
- 内部可以容纳
Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。
BFC-BLOCK FORMATTING CONTEXT 块级格式化上下文
BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素 - 所以，避免margin穿透啊，清除浮动什么的也好理解了 - from 张鑫旭blog原话
理解：一个独立的块级渲染区域，只有Block-level box参与，该区域拥有一套渲染规则来约束块级盒子的布局，内部布局不会受外部影响也不会对外部产生影响
如何产生BFC：
- float的值不为none
- overflow的值不为auto, scroll或hidden
- display的值为table-cell, table-caption或inline-block
（测试时发现display:table也会有触发bfc，table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC） - position的值不为relative或static
BFC规则
- 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
- 生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。
分析：
- 内部的Box会在垂直方向上一个接一个的放置
- 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
- 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
借此回忆一下之前学习过的一些布局知识
垂直方向上，两个相邻div margin重叠：其实是在同一个bfc环境中
设置父元素overflow:hidden或浮动父元素能清除浮动影响：其实就是使父元素触发bfc，让子元素参与父元素的高度计算
BFC应用
防止margin重叠：将发生重叠的元素放到两个BFC中（或者使其中一个产生BFC）
清除浮动：略
布局：利用BFC区域不会与float元素区域重叠的特性，便于实现多栏布局
