HTML是流式文档，所以HTML默认布局就是流式布局，这里所说的流式布局怎么理解呢？所谓了流式 布局就是：所有元素（包括块级元素和非块级元素）将以流的形式依次从左到右、从上到下排列！
流式布局是重点，在知道流式布局的原理之后，还要专注某一个元素在流式布局中自我的表现，元素空间分为占用空间和物理空间，占用空间是指元素所占用的空间，物理空间是指元素实际上所占用的空间！也即是说可以占用大空间，但是实际自身大小只能占用多大空间，剩余的就是配相的。
说到单个元素占用空间，不免有必须知道元素边距的事！因为边距margin会对文档流种其他的元素产生影响！
元素的布局分为相对布局和绝对布局，如果指定某元素的布局为相对布局，那么该元素在流式布局中的位置还是占用的！也就是不会影响其他元素的位置（就好像是默认的流式布局一样，自动被安排放置，各个元素的位置是相对的，所以认为是相对布局，这样理解我感觉更恰当）；如果指定某元的局部为绝对布局，那么该元素就会脱离文档流，此时其他元素会占用原本它应该占用的位置，并且该元素以最近的具有定位（Position）属性的父亲或祖先元素为参照物！
所以影响文档的流式布局的因素有某元素自身使用了绝对布局，导致脱离文档流，这就是我们关注的重点！因为它改变了游戏规则，那么这个绝对布局特殊性在哪里？那就是他的位置脱离之后是如何布局到UI中的，如果position被指定（相对布局和绝对布局都可以），那么left、top、right、bottom属性就生效了，其他情况属于无效！而且四个元素只能用相邻的两个元素，即不能使用上又使用下，使用了左又使用右！ 还有就是使用了绝对定位的元素因为已经脱离了文档流，margin-bottom和margin-right两个值不再对文档中的元素产生影响（margin-top和margin-left还是有影响,当然不影响流式布局中的元素，但是影响其他绝对布局的元素，但是margin-right和margin-bottom就对其他元素没任何影响了），绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效！
总结：
相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。 绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。 绝对定位的元素以最近的定位祖先元素为参照物。