CSS float的相關圖文詳解（一）
大家好，作為一個剛入門的小前端，第一次寫部落格，很是雞凍。由於涉獵較淺，有些知識可能說的不清楚，或者有什麼錯誤，歡迎留言指正。我的第一篇部落格寫的關於css的浮動的。想必很多小夥伴特別是剛學的，對浮動有一定的迷惑，當然了，並不是所有初學者都像我一樣迷迷糊糊。哈哈，廢話不多說，現在談談
我對浮動的理解，更應該說是總結吧，還是那句話，如果哪裡不對，請留言指出，這也是幫助我進步。
歷史：
浮動最開始是為了實現文字環繞的效果，也就是說浮動最開始是用來做一些文字混排效果 的。
浮動：
元素的浮動是指設定了浮動屬性的元素會脫離標準流的控制，移動到其父元素中指定位置的過程。如果元素設定了浮動，會使元素向左或向右移動，也就是說元素只能水平方向浮動，不能上下浮動，而元素設定了浮動後，周圍的元素也會重新排列。一個浮動的元素會盡量向左或向右移動，直到它的外邊緣碰到包含邊框或另一個浮動框的邊框為止。需要 注意 的是：浮動元素之前的元素不會受到影響，而浮動元素之後的元素會圍繞它。
圖1：
圖1解釋：這是三個自上而下排列的塊級元素，塊級元素獨佔一行，當給框1設定向右浮動時，框1會脫離文件流，不佔據原來的位置，並且向右移動，直到框1的右邊緣碰到包含框的右邊緣
總結 ： 浮動元素會脫離文件流，不佔據原來的位置。浮動的元素總是找離它最近的父級元素對齊，但是不會超出內邊距的範圍。
圖2：
圖2解釋：當給框1設定左浮動時，框1會脫離文件流並且向左移動，直到框1的左邊緣碰到包含框的左邊緣。前面說過浮動的元素會脫離文件流，不佔據原來的位置，所以，現在，框1不再處於文件流中，也就意味著框1不佔據空間了，而這時框2就跑到了框1原來的位置，因為框1現在漂浮著，實際上框1覆蓋住了框2，使得框2從檢視中消失了。 如果你將三個框都設定向左浮動，那麼，框1向左浮動直到碰到包含框，框2向左浮動直到碰到框1，而框3向左浮動直到碰到框2。
圖3：
圖3解釋：當包含框太窄，無法容納水平排列的浮動元素時，那麼其他浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能會被其他浮動元素"卡住"。
特性：
(1).浮動的元素排列位置，跟上一個元素(塊級)有關係。也就是說浮動對它下面的盒子有影響。例如：A元素和B元素是上下排列的，A元素在B元素的上面，如果A元素設定了浮動，那麼B元素的頂部會和A元素的頂部對齊(可參看圖2解釋)；如果A元素是標準流，那麼B元素的頂部會和A元素的底部對齊(即使B元素添加了浮動也會和A元素的底部對齊，因為B元素的浮動只對它的下面的盒子有影響)。
舉例：
html程式碼
<!Doctype html> <html> <head> <title>浮動</title> </head> <body> <div class="ab">A</div> <div class="ba">B</div> </body> </html>
CSS程式碼
<style>
.ab{
width:100px;
height:100px;
background-color:orange;
font-size:50px;
line-height:100px;
text-align:center;
}
.ba{
width:100px;
height:100px;
background-color:pink;
font-size:50px;
line-height:100px;
text-align:center;
}
</style>
顯示效果
上面是A元素和B元素初始化預設的狀態，這時，給A元素新增左浮動，程式碼如下：
<style>
.ab{
width:100px;
height:100px;
background-color:orange;
font-size:50px;
line-height:100px;
text-align:center;
/*給A元素設定float屬性，其值為left*/
float：left；
}
.ba{
/*width:100px;
height:100px;*/
/*為了能夠更好的顯示效果，將B元素的寬度高度都設定為200px*/
width:200px;
height:200px;
background-color:pink;
font-size:50px;
line-height:100px;
text-align:center;
}
</style>
給A元素新增左浮動顯示效果如下：
從上圖可以看出，A元素脫離了文件流，不佔據原來的位置，而B元素就佔據了A元素原來的位置，這時，A元素的頂部與B元素的頂部對齊。
如果是給B元素設定了浮動，而A元素沒有設定浮動，會有什麼樣的效果呢？程式碼如下：
<style>
.ab{
width:100px;
height:100px;
background-color:orange;
font-size:50px;
line-height:100px;
text-align:center;
}
.ba{
width:100px;
height:100px;
background-color:pink;
font-size:50px;
line-height:100px;
text-align:center;
/*給B元素設定浮動*/
float:left;
}
</style>
顯示效果如下：
雖然是給B元素設定了浮動，但是A元素和B元素的排列方式跟最開始沒有設定時的排列方式一樣。這說明新增浮動的元素只會對它下面的元素產生影響，而上面的元素不會產生影響。
(2). 一個父盒子裡面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。
例子：
html程式碼
<!Doctype html> <html> <head> <title>浮動</title> </head> <body> <div class="father"> <div class="son1">son1</div> <div class="son2">son2</div> <div class="son3">son3</div> </div> </body> </html>
css程式碼
<style>
.father{
width:310px;
height:310px;
border:1px solid red;
}
.son1{
width:100px;
height:100px;
background-color:orange;
font-size:20px;
line-height:100px;
text-align:center;
float:left;
}
.son2{
width:100px;
height:100px;
background-color:pink;
font-size:20px;
line-height:100px;
text-align:center;
float:left;
}
.son3{
width:100px;
height:100px;
background-color:yellowgreen;
font-size:20px;
line-height:100px;
text-align:center;
float:left;
}
</style>
顯示效果如下圖所示：
(3). 元素新增浮動後，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者預設的內容多少浮動根據元素書寫的位置來顯示相應的浮動。浮動可以讓元素預設轉換為行內塊元素。行內元素手動設定的寬高是不生效的，給個display:inline-block就生效了，現在不給display給個float也會生效。
例子：
html程式碼
<!DOCTYPE html> <html> <head> <title>浮動</title> </head> <body> <span class="cls">我是行內元素</span> </body> </html>
css程式碼
<style>
.cls{
width:100px;
height:100px;
background-color:red;
/*新增浮動*/
float:left;
}
</style>
顯示效果：
本身span元素是行內元素，設定寬度高度是沒有效果的，只有將span轉為塊級元素或者行內塊元素才會生效，可以直接給span元素設定float屬性就可以轉化為塊級元素或行內塊元素。
(4).浮動的元素不會壓住padding
總結：
關於浮動這裡總結了個小口訣，大家感興趣的話可以參考下。
float 浮 漏 特
浮： 加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。
漏： 加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。
特： 特別注意，首先浮動的盒子需要和標準流的父級搭配使用， 其次 特別的注意浮動可以使元素顯示模式體現為行內塊特性。
浮動是把雙刃劍，在給我們的佈局帶來便利的同時有一些缺點需要我們去解決。例如最常見的父元素塌陷。下一節詳細介紹如果清除浮動等。
如果您看到這裡，文章中有哪些不對的歡迎留言指出，也可以提出更寶貴的意見。第一次寫部落格，如果字型或者排版給您帶來不便，我深感抱歉。也希望自己的一點點小總結對您多少有點幫助。