文档流处在文档的最底层，它规定了一个页面的位置和元素布局等规则。 我们所创建的元素都处在文档流中，文档流所指定的规则比如块级元素独占一行，内联元素不会独占一行，内联元素不能设置高宽，父元素的高度由子元素撑开等。文档流之所以称为流，是它的布局像流一样从上到下在从左到右。 而元素脱离文档流之后，该元素便不再遵循文档流的规则，比如块级元素不再独占一行，内联元素脱离文档流之后可以设置高宽，脱离的元素不能撑开父元素，不再在文档流中占有位置等。 而脱离文档流的设置有两种：float，position：absolute
1、float （我的理解是通过设置float来脱离文档流，脱离后的元素会遵循文档流之外的另一套规则，暂且称为浮动规则）。 规则如下： ①、产生字围效果，元素不会盖住文字，文字会绕着元素布局。 ②、元素层级提高，会盖住非浮动的元素。 ③、父元素的垂直外边距不会和子元素重叠。 ④、浮动元素不会超过超过上面的非浮动元素，会排列在非浮动块元素的下一行。 ⑤、元素浮动后会尽量向页面的左上或右上浮动，直到遇到父元素边框或其它浮动元素（浮动的元素不会脱离父元素，浮动还是相对于父元素浮动）。 ⑥、浮动的元素不会超过它上边的兄弟元素，最多一边齐。 ⑦、文档流中子元素的宽度默认为父元素的100%，脱离文档流之后，块元素的高宽度都只能由内容撑开，而且浮动的子元素无法撑开父元素（除非父元素也是浮动元素）。 ⑧、内联元素浮动后会变成块级元素。
2、position:absolute （我的理解是通过设置绝对定位来脱离文档流，脱离后的元素会遵循文档流之外的另一套规则，暂且称为绝对定位规则）。 规则如下： ①、 绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的，没有这种祖先元素，则相对于浏览器窗口（以左上角为坐标（0，0）） ②、定位元素会提高一个层级。 ③、内联元素变块级元素，高宽都只能由内容撑开。 ④、当一个文档流中的元素前的一个元素开启了绝对定位，则这个文档流中的元素会向上移动，被前元素覆盖。（其实跟浮动规则差不多），如果没有这样的情况，则开启了绝对定位的元素如果不设置偏移量，位置不会发生变化。
浮动规则≠绝对定位规则，两者不相通 这句话的意思是一个浮动元素和一个定位元素会重叠，且绝对定位元素的层级高于浮动元素的层级（按照浮动规则，浮动的兄弟元素是不会相互覆盖的）。 举例：
（当两个元素都开启绝对定位且不设置偏移量时，两个元素也会像上面这个图一样相互覆盖）