浮動

使用css的float屬性設定元素的浮動
可選值：none（預設值）| left | right

浮動特點

1.元素設定浮動以後，完全脫離文件流，並向頁面的左上或右上浮動。直到遇到父元素的邊框或其他的父元素時則停止浮動。

2.如果浮動元素上邊是一個沒有浮動的塊元素，元素不會超過該塊元素。

3.浮動元素的浮動位置不能超過他上邊浮動的兄弟元素，最多一邊齊。

4.浮動元素不會覆蓋文字，文字會圍繞在浮動元素的周圍，所以可以通過浮動來實現文字環繞圖片的效果。

浮動以後元素會完全脫離文件流，脫離文件流以後元素會具有如下特點：

1.塊級元素不獨佔一行。

2.塊級元素的寬度和高度都被內容撐開。

3.元素不在文件流佔用位置。

4.內聯元素會變成塊元素。

塌陷問題

如果父級元素沒有設定高度，子元素浮動後父級元素將會收縮為盒子模型所設定的引數大小。

例如：父級元素為藍色電話線部分。

解決塌陷問題

方案一：增加塊級元素，並設定clear屬性為both。缺點：程式碼冗餘。

方案二：使用偽類結構樣式（推薦用法）