CSS —— 浮动与定位

文档流

• 文档流，是指元素排版布局过程中，元素会自动从左到右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
• 标准流的特点：
  1. 块级元素从上到下，独占一行
  2. 行内元素，行内块级元素从左到右在一行中显示。
  3. 占位置。

浮动

• CSS 的 Float（浮动），会使元素脱离文档流，向左或向右移动，其周围的元素也会重新排列。

• 取值：

  1. left : 对象浮在左边
  2. right : 对象浮在右边
  3. none : 对象不浮动

• clean 属性：规定元素的哪一侧不允许其他浮动元素。

  值	描述
  left	在左侧不允许浮动元素。
  right	在右侧不允许浮动元素。
  both	在左右两侧均不允许浮动元素。
  none	默认值。允许浮动元素出现在两侧。
  inherit	规定应该从父元素继承 clear 属性的值。

 #box{
   float:left;
   //  #box 右侧将不存在浮动的元素
   clean:right;
 }

定位

• 使用定位 position 同样可以使元素脱离文档流(或不脱离文档流，相对于当前的位置进行偏移)
• 定位可分为： 默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）

相对定位 —— relative

• 不影响元素脱离文档流，而是相对于当前元素在默认流中的位置进行偏移的。
• 通过top，bottom，left，right的位置相对于其正常位置进行定位。
• 该元素偏移之后，可能存在覆盖其他元素的情况，可以使用z-index属性改变层叠情况。

绝对定位 —— absolute

• 会使元素完全脱离文档流
• 使内联元素完全支持宽高（具备块特征）
• 使块元素默认宽根据内容决定（内联特征）
• 绝对定位的元素的位置是相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，它的位置就相对于body
• 绝对定位的框可以覆盖页面的其他元素。

固定定位 —— fixed

• 生成绝对定位的元素，相对于浏览器窗口进行定位。
• 不受浏览器滚动条的影响。