最近看了很多CSS相关的文章，相关浮动，BFC，垂直居中等一些问题，这里希望把学到的做一个归纳总结。
1. 常规流(文档流)
排版遵循从左到右，从上到下的规则，display为block的会自占一行，可以设置宽高度和外边距等，inline元素会排成一行，直到空间不能满足大小会换行，不能设置宽高，宽高由内容物撑开。inline-block则吸收了以上的两个优点，表现为外面是inline盒子，里面是block盒子，既可以和其他inline-block盒子排成一行，又可以设置自己的宽高和边距。
当然这些任何一个都不是完美的，引发的排版问题有锯齿现象，包裹现象等......
span就是属于常规流的，如果被position改变定位的话，比如绝对定位absolute，固定定位fixed，处于常规流中的兄弟元素就会无视这个span，这个span就不会被按照常规流的规则被“挤开”，兄弟节点表现形式为无视这个span。eg：
（absolute和fixed，这两个区别是前者是相对常规流中的第一个父元素定位，后者是相对浏览器窗口进行定位）
2.包含块
以下内容翻译自CSS 2.1官方文档。网址：https://www.w3.org/TR/CSS2/visudet.html#strut
有时，一个元素的盒子的位置和尺寸根据一个确定的矩形计算，这个确定的矩形叫这个元素的包含块。一个元素的包含块根据以下规则确定：
1、根元素所在的包含块叫初始包含块 initial containing block。对于连续媒体设备（continuous media），初始包含块的大小等于视口viewpor的大小，基点在画布的原点（视口左上角）；对于分页媒体（paged media），初始包含块是页面区域（page area）。初始包含块的direction属性与根元素的相同。
2、对于其他元素，如果元素的position属性是relative或static，他的包含块是由最近的祖先块容器盒（block container ancestor box）的内容区域（content edge：width属性和height属性确定的区域）创建的。
3、如果一个元素的position属性为fixed，他的包含块由视口创建（连续媒体）或者由页面区域创建（paged media）。
4、如果元素的position为absolute，他的包含块由最近的position不为static的祖先元素创建，具体创建方式如下：
A.如果创建包含块的祖先元素是行内元素（inline element），包含块的范围是这个祖先元素中的第一个和最后一个行内盒的padding box围起来的区域。
B.如果这个祖先元素不是行内元素，包含块的范围是这个祖先元素的内边距+width区域（padding edge）。
如果没有找到这样的祖先元素，这个绝对定位的元素的包含块为初始包含块。
3.浮动元素
设置浮动后，就变成了一个块级元素(且其他常规流中的块级元素会无视它)，一般不能和定位一起使用，若同时使用，有效的是定位。
但是有个特殊的情况就是relative和float一起使用，这时候元素会脱离文档流，且会表现出相对正常位置进行定位。这也是css权威指南说浮动元素同时处于两个流的原因。
浮动元素的摆放方式：
当宽度不够时，不能超过当前行的顶线，不会超过前方元素的最高点。
eg：
浮动元素的margin不会合并，也就是共用，可以利用BFC清除浮动，BFC在下面说。
浮动元素虽然不影响父类div的布局，但是通过影响行内元素(图中的文字)来间接影响块级元素（图中因为浮动元素影响了文字的排版导致把父元素div撑开）
eg:
行内元素还是会避开浮动元素空间而折行
4.浮动的清除
5.浮动的闭合
如何一个没有宽高的div里有很多浮动元素，那么这个div是不会被浮动元素撑开的。我们若想让这个父div块包含所有的浮动元素，常见的做法：
-
触发BFC，给div设置overflow:hidden属性。
加一个带内敛属性的标签，width保证这个块会被浮动元素挤到最下面，（所以是inline-block属性），父div就被撑开了。这个就是利用了上面浮动元素可以影响内敛元素而间接影响块级元素。缺点就是多了最下面一行不知道干嘛的（可以利用最下面这行写个footer？）
-
用clear清除浮动，（其实正确叫浮动闭合）其实就是上面的那个原理，
下移后就会把父div撑开，这个a没有高度，但是有我们设的boder(便于观察） -
父div的display设置为table或者table-cell，或者为CSS3的flow-root，和overflow：hidden一样，都是触发BFC特性。
-
clearfix+after伪元素，也是目前最常用的，
利用伪元素的clear：both下移，撑开。实现浮动闭合
6.直接让父元素div块变成浮动
也是触发了BFC。。。
6.BFC
这个知乎上有个总结的蛮不错的，直接给链接吧，链接