HTML布局之基于文档流的解析

HTML布局之基于文档流的解析

1.1文档流
将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。
1.2 HTML布局基于文档流的解析
每个非浮动块级元素都独占一行。
内联元素不会独占一行。 几乎所有元素(包括块级，内联和列表元素）均可生成子行， 用于摆放子元素。
浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。若当前行容不下， 则另起新行再浮动。
1.3 定位模式基于文档流的解析
有三种情况可以使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位。 但是在IE中浮动元素也存在于文档流中。
当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。
相对定位， 即相对于元素在文档流中位置进行偏移。 但保留原占位。
绝对定位， 即完全脱离文档流， 相对于position属性非static值的最近父级元素进行偏移。
固定定位， 即完全脱离文档流， 相对于视区进行偏移。