脱离文档流的一些情况

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。

　　当前所知的脱离文档流的方式有两种：浮动和定位。

 　　

a.定位属性positon

---

　　先看一下定位。看一段对定位各个字段的描述，有助于理解

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

　　position的值为absolute、fixed的元素脱离文档流，static、relative没有脱离文档流

　结论：

　　1.static定位不脱离文档流，设置left/top/right/bottom没有作用，对margin/padding敏感。

　　2.父子节点都是没有脱离文档的两种定位（static、relative）的外边距（margin）会合并，显示效果以最大的那个外边距为准。

b. 浮动属性float

---

　　float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

　　注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

　　为什么说浮动元素是脱离文档流的。

　　脱离文档流的元素有个标志：没有实际高度。

对于浮动属性来说，位置属性（left/top/right/bottom）是没有用的。

　浮动有点像玩俄罗斯方块。向左浮动，方块从右往左滑过来，如果某一行空间不够（基于父容器的宽度），那么这个块会沿着最右边的块的下边沿水平划过来，最后看卡到哪里就停止。

可以看到互动元素之间连接的部分是没有空隙的。这是一个很好的特性，可以用来做排列，精确到1px。

 

　　浮动元素不占据高度，如果某个元素内部全是浮动元素，最后该元素也没有高度，如果想要父元素内的浮动元素占有原来的高度，在父元素样式中加入overflow：hidden即可。

对于浮动与定位的位置优先级：

　　(fixed == absolute) > float > relative > static。理解为同时设置了position:absolute和float:right。忽略float:right。