可以讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動的特性來布局了
什麼是浮動？
元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
在css中，通過float屬性來定義浮動，其基本語法格式如下：
選擇器
float: left/right/none;left 元素向左浮動
right 元素向右浮動
none 元素不浮動（預設值）
浮動詳細內幕特性
浮動脫離標準流，不佔位置，會影響標準流。浮動只有左右浮動。
浮動首先建立包含塊的概念。就是說，浮動的元素總是找離它最近的父級元素對齊。但是不會超出內邊距的範圍。
浮動的元素排列位置，跟上乙個元素（塊級）有關係。如果上乙個元素有浮動，則a元素頂部會和上乙個元素的頂部對齊；如果上乙個元素是標準流，則a元素的頂部會和上乙個元素的底部對齊。
乙個父盒子裡面的子盒子，如果其中乙個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。
元素新增浮動後，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者預設的內容多少浮動根據元素書寫的位置來顯示相應的浮動。
總結：3. 浮動的目的就是為了讓多個塊級元素同一行上顯示。
4. 加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。
5. 加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置留給了標準流的盒子。
6. 特別注意，首先浮動的盒子需要和標準流的父級搭配使用， 其次特別的注意浮動可以使元素顯示模式體現為行內塊特性。
為什麼要清除浮動
我們前面說過，浮動本質是用來做一些文字混排效果的，但是被我們拿來做布局用，則會有很多的問題出現，但是，你不能說浮動不好
由於浮動元素不再占用原文件流的位置，所以它會對後面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動。
準確地說，並不是清除浮動，而是清除浮動後造成的影響
如果浮動一開始就是乙個美麗的錯誤，那麼請用正確的方法挽救它。
清除浮動本質
清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0的問題。
清除浮動的方法
其實本質叫做閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到裡面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。
在css中，clear屬性用於清除浮動，其基本語法格式如下：
選擇器屬性值 描述
left 不允許左側有浮動元素（清除左側浮動的影響）
right 不允許右側有浮動元素（清除右側浮動的影響）
both 同時清除左右兩側浮動的影響
額外標籤法
w3c推薦的做法是通過在浮動元素末尾新增乙個空的標籤例如
style
=」clear:both」
>
div>
，或則其他標籤br等亦可。優點： 通俗易懂，書寫方便
缺點： 新增許多無意義的標籤，結構化較差
父級新增overflow屬性方法
可以通過觸發bfc的方式，可以實現清除浮動效果。(bfc後面講解)
可以給父級新增： overflow為 hidden|auto|scroll 都可以實現
overflow:hidden | auto | scroll;
缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素
使用after偽元素清除浮動
:after 方式為空元素的公升級版，好處是不用單獨加標籤了
使用方法：
.clearfix:after
.clearfix /* ie6、7 專有 */
.clearfix:before,.clearfix:after
.clearfix:after
.clearfix
缺點： 由於ie6-7不支援:after，使用 zoom:1觸發 haslayout。
CSS浮動以及清除浮動
傳統網頁布局的三種方式 本質 用css擺放盒子。實際開發中，乙個頁面基本都包含了這三種布局方式 1 普通流 標準流 文件流 最基本的布局方式 標籤按照規定好預設方式排列 浮動 float屬性用於建立浮動框，將其移動到一邊知道左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣。要想塊元素水平排列如果轉換成行...
CSS的浮動以及清除浮動
給元素新增了float屬性 float left,float right 可以讓元素進行橫向排列 做文字圍繞效果 因為文件流元素會忽視浮動元素的存在，但是文件流元素的文字卻不會。新增了float屬性後，該元素會脫離正常的文件流，所以會覆蓋其他的元素，父元素由於沒有被撐開，造成了高度塌陷。所以清除浮動...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...