一、浮动和文档流
1. 默认文档流
流就是文档布局的自身特性,而定位机制可能就会打破原有流的特性；默认文档流有内联元素（从左向右排列）、块级元素（从上向下排列）。
2. 脱离文档流
文档一旦脱离文档流，就不再受文档流布局约束，在算其父元素高度时不包括自身；
以下情形会导致元素脱离文档流：float 浮动、position 定位(绝对定位、固定定位)。
3. 浮动
子元素在父元素中浮动时，会使其脱离文档流，导致父元素失去管理能力。属性：
float：none 默认不浮动
float：left 左浮动
float：right 右浮动
（1）浮动的特点
元素浮动后不再撑起父级的高度；
元素浮动后可以在父元素的左侧或右侧排列；
元素浮动后不再自占一行；
元素浮动后会对后面的文档流中的兄弟元素产生影响，会遮盖其后的兄弟元素；
内联元素浮动后，自动变成块级元素；
元素浮动后虽不在撑起父级的高度，但仍受父级影响，还在父级范围内；
父元素内所有元素均浮动，元素们宽度相加大于父元素宽度时，会自动换行；
元素浮动后不自占一行，会向前占位，前方空值位置属自己所有，后方的元素换行时，不能占据；
元素浮动时，原则会盖住其后方文档流中的兄弟元素，但文字、图片等（行内元素和行内块）不会被盖住；
文字不会被盖住而是环绕浮动元素四周显示。
（2）清除浮动
元素在父元素中浮动时，会导致父元素的高度坍塌（无高度）、元素布局错位，页面产生混乱、文字环绕，图片环绕等；清除浮动可以使块级元素横向布局，因为块级元素的默认排列是垂直方向的、而且还会变化文档流布局的方向，可以更加多样化。
需要注意的是清除浮动并不是去除浮动，而是将浮动带来的负面效果解决掉。
通常写完浮动之后，最好马上找到父元素做清除浮动处理 overflow: hidden; 防止布局错位。
二、定位
1. position属性
position属性是定位属性，用于指定一个元素在文档中的定位方式，top、right、bottom、left属性值决定了该元素的距离四边的位置，可以为负值。常用取值：relative 相对定位、absolute 绝对定位、fixed 固定定位。
2. 相对定位 - position: relative
相对定位不会脱离文档流，可使用 top、right、bottom、left 做偏移，元素相对的位置是自己本来的位置，移动不改变页面布局；相对定位属性不会影响周围的布局，但会出现新的层叠顺序。
.box img { position: relative; bottom: 130px; right: -150px; }
当四个方向值发生重合时，以top和left为优先。
3. 绝对定位 - position: absolute
元素会脱离文档流，其他元素不为该元素预留空间，可使用 top、right、bottom、left 做偏移，绝对定位的元素可以设置外边距，且不会与其他边距合并。
让子元素在父元素内绝对定位时，先为父元素设置相对定位属性 position: relative;，然后本身进行绝对定位 position: absolute；
eg：使用绝对定位让子元素在父元素中水平垂直居中
baba { width: 100%; height: 300px; position: relative; } .baba div { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }
4. 固定定位 - position: fixed; （它的父级始终是html）
元素会脱离文档流，但不用找父级；固定定位参照的是浏览器窗口，可使用 top、right、bottom、left 做偏移。
5. z-index - 层叠顺序
该属性必须在元素有定位属性(相对或绝对)的前提下指定，没有定位的元素指定z-index无效。
取值直接设置没有单位的整数，可以为负值，值越大层级越高。
.d1 { background-color: red; position: relative; z-index: 1; }
层叠领域的准则：
值大的在上：z-index的值，在同一个层叠上下文领域，层叠水平值大的覆盖小的；
后来的在上：当元素的层叠水平一致时，在文档流中处于后面的元素会覆盖前面元素。
