關於浮動：

　　巨集觀地講，我們的web頁面和photoshop等設計軟體有本質的區別：web頁面的製作，是個“流”，必須從上而下，像“織毛衣”。而設計軟體，想往哪裡畫個東西，都能畫。　　

行內元素和塊級元素的區別：（非常重要）

行內元素：

• 與其他行內元素並排；
• 不能設定寬、高。預設的寬度，就是文字的寬度。

塊級元素：

• 霸佔一行，不能與其他任何元素並列；
• 能接受寬、高。如果不設定寬度，那麼寬度將預設變為父親的100%。 

塊級元素可以轉換為行內元素：

一旦，給一個塊級元素（比如div）設定：

display: inline;

行內元素轉換為塊級元素：

同樣的道理，一旦給一個行內元素（比如span）設定：

display: block;

那麼，這個標籤將立即變為塊級元素，此時它和一個div無異。block”是“塊”的意思。也就是說：

• 此時這個span能夠設定寬度、高度
• 此時這個span必須霸佔一行了，別人無法和他並排
• 如果不設定寬度，將撐滿父親

元素怎樣浮動：

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之後的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果影象是右浮動，下面的文字流將環繞在它左邊：

例項：img { float:right; }

給新手的建議：

我們在初期一定要遵循一個原則：永遠不是一個東西單獨浮動，浮動都是一起浮動，要浮動，大家都浮動。

清除浮動的幾種方法：

1.在最後一個子元素增加空div設定clear：both 

2.增加偽類元素：after　{

clear:both;　　content:"";　　display:block;

}

例項：.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

3.給父級元素設定合理高度。

4.給父元素加overflow：hidden（不建議使用，會隱藏溢位的部分）。

補充：

上圖中，一個span標籤不需要轉成塊級元素，就能夠設定寬度、高度了。所以能夠證明一件事兒，就是所有標籤已經不區分行內、塊了。也就是說，一旦一個元素浮動了，那麼，將能夠並排了，並且能夠設定寬高了。無論它原來是個div還是個span。