浮動內容新增

清除浮動

清除浮動本質

清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。

清除浮動的方法

clear:both;

額外標籤法

在浮動元素末尾新增一個空的標籤例如 <div style=”clear:both”></div>，或則其他標籤br等亦可。

父級新增overflow屬性方法

可以給父級新增： overflow為 hidden|auto|scroll  都可以實現。

注意： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素。

使用after偽元素清除浮動

:after 方式為空元素的升級版，好處是不用單獨加標籤

使用方法：

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   
 .clearfix {*zoom: 1;}   /* IE6、7 專有 */

注意： content:"." 裡面儘量跟一個小點，或者其他，儘量不要為空，否則再firefox 7.0前的版本會有生成空格。

使用before和after雙偽元素清除浮動

使用方法：

.clearfix:before,.clearfix:after
 
 { 
  content:"";
  display:table;
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

定位(position)

標題元素的定位屬性

1、邊偏移

2、定位模式(定位的分類)
在CSS中，position屬性用於定義元素的定位模式，其基本語法格式如下：

選擇器{position:屬性值;}

position屬性值

static 自動定位（預設定位方式）

relative 相對定位，相對於其原文件流的位置進行定位

absolute 絕對定位，相對於其上一個已經定位的父元素進行定位

fixed 固定定位，相對於瀏覽器視窗進行定位

靜態定位(static)

靜態定位是所有元素的預設定位方式，當position屬性的取值為static時，可以將元素定位於靜態位置。 所謂靜態位置就是各個元素在HTML文件流中預設的位置。

標準流特性

相對定位（relative）

相對定位是將元素相對於它在標準流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位於相對位置。

對元素設定相對定位後，可以通過邊偏移屬性改變元素的位置，但是它在文件流中的位置仍然保留。

注意：

1. 相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所佔的位置，繼續佔有。
2. 其次，每次移動的位置，是以自己的左上角為基點移動（相對於自己來移動位置）

就是說，相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。（相對定位不脫標）

如果說浮動的主要目的是 讓多個塊級元素一行顯示，那麼定位的主要價值就是 移動位置， 讓盒子到我們想要的位置上去。

絕對定位（absolute）

[注意] 如果文件可滾動，絕對定位元素會隨著它滾動，因為元素最終會相對於正常流的某一部分定位。

當position屬性的取值為absolute時，可以將元素的定位模式設定為絕對定位。

注意： 絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不佔位置。

固定定位（fixed）

四種定位總結