XueSeason
commented
8 years ago 那我就说说几个脱离文档流的情况：
float
最典型的脱离文档流的例子，正常情况下，处于文档流中的元素十分贪婪，它们会尽最大能力占领一切空位，我们可以想象成地板上铺满的瓷砖，这时有一个元素被设置为float，那么这块瓷砖就会漂浮脱离文档流，后续处于文档流的元素发现前面的元素所占的空位被释放了，就会自动挤过去。此时float的元素也会朝着漂浮的的方向移动，直到到达边界为止。这时就形成了两个维度，上面是漂浮着的被设置为float元素，下面是正常文档流内的元素。
position
并非所有的定位都会脱离文档流，默认的静态定位不用说，相对定位虽然看上去不太符合文档流的顺序定位，但是它依然占据之前文档流中的空间。
绝对定位，元素会彻底从文档流中抽离，然后再相对于其他元素定位（默认为 body），元素之前占据的空间将被回收。
绝对定位的默认定位上下文是 body，但是如果其中父元素的定位为 relative，那么这个父元素就是其定位上下文。
绝对定位是相对于最近定位的祖先元素定位。其中祖先元素的定位方式为非 static 定位。如果祖先元素都是非定位元素，那么绝对定位的上下文就是 body。
固定定位和绝对定位类似，不在赘述。
需要注意的几个点
使用 float 浮动图片，浮动的元素从文档流中被移除，随后的文本元素的文本会绕开图片。
如果浮动非图片元素，必须给它设定宽度，图片元素自身拥有默认宽度。
有这样一个浮动的问题
<section class="clearfix">
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
</section>
<footer> Here is the footer element…</footer>我们假设 section 元素被设为 float 脱离文档流，此时如果没有设置 footer，就会出现 footer 文本元素围绕 section 的情况，最简单的方案就是给 footer 设置 clear:both。
另外一个比较优雅的做法就是利用伪元素，这样对后续的元素设置是无侵入的，否则一旦前面的元素 float，就要设置随后元素，这样显然不是好的做法。
伪元素的 CSS 代码如下：
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}剩下的后续再补充吧。
RaineySpace
HTML元素会按照它们各自在标记中出现的先后顺序，依次自上而下，从左至右的顺序排列元素。