關於浮動：

　　宏觀地講，我們的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。

關於浮動的一些註意事項