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（如它自身也是一个浮动元素）。

分析：

1. 内部的Box会在垂直方向上一个接一个的放置
2. 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
4. BFC的区域不会与float的元素区域重叠
5. 计算BFC的高度时，浮动子元素也参与计算
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

借此回忆一下之前学习过的一些布局知识
垂直方向上，两个相邻div margin重叠：其实是在同一个bfc环境中
设置父元素overflow:hidden或浮动父元素能清除浮动影响：其实就是使父元素触发bfc，让子元素参与父元素的高度计算

BFC应用
防止margin重叠：将发生重叠的元素放到两个BFC中（或者使其中一个产生BFC）
清除浮动：略
布局：利用BFC区域不会与float元素区域重叠的特性，便于实现多栏布局