float屬性是CSS常用的一個屬性，應用場景廣泛，同時也是一個難點，涉及到一些相關細節及注意點。因此，就特別整理總結一下。
一、float介紹
float元素也稱為浮動元素，設定了float屬性的元素會根據屬性值向左或向右浮動。浮動元素會從普通文件流中脫離，但浮動元素影響的不僅是自己，它會影響周圍的元素對齊進行環繞。簡單來說，就是讓block元素無視float元素，讓inline元素讓流水一樣圍繞著float元素來實現浮動佈局。 文字環繞圖片是float典型的應用場景，如下所示：
<img class="float" src="image1.jpg">
<p class="around">Harry Potter is a series of fantasy novels written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School of Witchcraft and Wizardry. </p>
複製程式碼css程式碼
.float{
float:left;
margin: 10px;
width: 100px;
height: 100px;
}
.around {
background: #00ff90;
width:300px;
padding: 10px;
}
複製程式碼由上圖可以看出，img元素設定了float：left之後會脫離文件流而居於左側存在。而p元素無視img元素的存在，從視窗的左上角開始流入，但是p元素中的文字意識到img元素的存在而環繞圖片流入。並且img元素是漂浮在p元素的上層。
二、float元素特性
1.塊級框
不管一個元素是行內元素還是塊級元素，如果被設定了浮動，那浮動元素會生成一個塊級框，可以設定它的width和height，因此float常常用於製作橫向配列的選單，可以設定大小並且橫向排列。
首先看一個塊級元素的例子。
<div class="div1">
<img src="image1.jpg">
</div>
<div class="div2">
<img src="image2.jpg">
</div>
複製程式碼css程式碼
.div1{
padding: 10px;
border: 3px solid black;
}
.div2 {
float: left;
padding:10px;
border: 3px solid red;
}
複製程式碼預設情況下，div元素的寬是100%，一旦讓該div浮動起來，立刻會像inline元素一樣產生包裹性，寬度會跟隨內容自適應。
再來看下行內元素的例子：
<div class="box">
<span class="rule1">
首頁
</span>
<span class="rule1">
發現
</span>
<span class="rule1">
動態
</span>
<span class="rule1">
我的
</span>
</div>
複製程式碼css程式碼
.box {
background: #d32d2d;
padding: 10px;
width: 500px;
height: 400px;
}
.rule1 {
float: left;
margin: 10px;
padding: 10px;
background: #eee;
width: 100px;
text-align: center;
}
複製程式碼由上圖發現，當span設定float屬性後，可以指定width，height值。 同時可以發現，當多個元素指定為float且同時為left/right時，元素是緊挨著排列，行內寬度不夠時再換行排列。
2.高度崩塌
<div class="div1">
<img src="image1.jpg">
</div>
<div class="div2">
<img src="image2.jpg">
</div>
複製程式碼css程式碼
.div1{
padding: 10px;
border: 3px solid black;
}
.div2 {
border: 3px solid red;
}
.div2 img {
float: left;
padding:10px;
}
複製程式碼將float屬性設定給div2內部的img元素，可以看出div2的高度並沒有img元素被撐起來，因此又叫高度崩塌。 因為將img元素設定為浮動元素，所以脫離文件流。因而div2中認為沒有元素，所以產生了高度崩塌。具體怎麼解決高度崩塌，後面再介紹。
三、clear屬性
clear屬性的作用是清除浮動。
clear : none | left | right | both
取值：
none : 預設值。允許兩邊都可以有浮動物件
left : 不允許左邊有浮動物件
right : 不允許右邊有浮動物件
both : 不允許有浮動物件
複製程式碼
<div class="div1">
</div>
<div class="div2">
</div>
複製程式碼css程式碼
.div1{
float: left;
width: 300px;
height: 150px;
padding: 10px;
border: 3px solid black;
background-image: url("image1.jpg")
}
.div2 {
border: 3px solid red;
padding:10px;
width:500px;
height:200px;
background-image: url("image2.jpg")
}
複製程式碼如上圖所示，由於div1是浮動元素，所以div2在div1底層鋪展。 如果想要讓div2換行排列，居於div1底端下方，這個時候就要用到clear屬性了。
css程式碼
.div1{
float: left;
width: 300px;
height: 150px;
padding: 10px;
border: 3px solid black;
background-image: url("image1.jpg")
}
.div2 {
clear: left;
border: 3px solid red;
padding:10px;
width:500px;
height:200px;
background-image: url("image2.jpg")
}
複製程式碼只需要在div2中加入clear: left。
對於CSS的清除浮動(clear)，一定要牢記：這個規則只能影響使用清除的元素本身，不能影響其他元素。
以上圖為例子說明，div1和div2都設定了float：left。如果在div1的CSS樣式中新增clear:right，來迫使div2下移，則沒有任何效果。因為這個清除浮動是在div1中呼叫的，它只能影響div1，不能影響div2。
要想讓div2下移，就必須在div2的CSS樣式中使用浮動。div2的左邊有浮動元素div1，因此只要在div2的CSS樣式中使用clear:left;來指定div2元素左邊不允許出現浮動元素，這樣div2就被迫下移一行。
四、BFC
為什麼要介紹BFC，是因為它和float有著密切的關係。
1.BFC的介紹
定義
一些元素，如float元素，如position為absolute,inline-block,table-cell或table-caption的元素，以及overflow屬性不為visible的元素，它們將會建立一個新的塊級格式化上下文(Block Formatting Context),也就是我們所說的BFC。
形成
BFC也是HTML中的一個盒子（看不見而已），只有滿足至少下列條件之一才能形成BFC:
- float屬性不為none.
- position屬性不為static和relative.
- display屬性為下列之一:table-cell,table-caption,inline-block, flex,inline-flex.
- overflow屬性不為visible.
佈局規則
- 內部的Box會在垂直方向，一個接一個地放置。
- Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
- 每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。
- 計算BFC的高度時，浮動元素也參與計算
有些規則可能不太理解，看完下面的內容就會理解。
2.BFC作用
消除Margin Collapse
在正常情況下，在一個容器內的所有box將會由上至下依次垂直排列，即我們所說的一個元素佔一行，並切垂直相鄰的距離(即margin)是由各自的margin決定的，而不是兩個margin的疊加。
讓我們看一個例子：
html程式碼:
<div class="container">
<p>條目 1</p>
<p>條目 2</p>
<p>條目 3</p>
</div>
複製程式碼css程式碼:
.container {
width: 300px;
background-color: black;
overflow: hidden;
}
p {
background-color: white;
margin: 10px 0;
text-align: center;
}
複製程式碼
理想情況下，我們會認為p標籤之間的margin應該是它們的和(20px),但實際上卻是10px.這其實是collapsing margins(外邊距坍塌)。其中flex佈局不存在collapsing margins，水平方向上也不存在collapsing margins。
利用BFC能消除collapsing margins。緊記只有當元素在同一個BFC中時，垂直方向上的margin才會clollpase。如果它們屬於不同的BFC，則不會有margin collapse。因此我們可以再建立一個BFC去阻止margin collpase的發生。 所以為了讓他們的margins變成20，我們只需要用div,建立一個BFC,令p元素處於不同BFC即可。
html程式碼
<div class="container">
<p>條目 1</p>
<p>條目 2</p>
<div class="newBFC">
<p>條目 3</p>
</div>
</div>
複製程式碼css程式碼
.container {
width: 300px;
background-color: black;
overflow: hidden;
}
p {
background-color: white;
margin: 10px 0;
text-align: center;
}
.newBFC {
overflow: hidden;
}
複製程式碼容納浮動元素
就是解決上面遇到的高度崩塌問題。
.div1{
padding: 10px;
border: 3px solid black;
}
.div2 {
overflow: hidden;
border: 3px solid red;
}
.div2 img {
float: left;
padding:10px;
}
複製程式碼除此之外，對於解決高度崩塌，還有如下方式：
增加一個清除浮動的子元素
html程式碼
<div class="div1">
<img src="image1.jpg">
</div>
<div class="div2">
<img src="image2.jpg">
<div style="clear: both"></div>
</div>
複製程式碼增加一個div元素，因為是清除元素，會在img元素底部顯示，因此會撐起div2高度。
阻止文字換行
大多數情況(若沒有特殊設定)，如Figure1,文字將會環繞浮動元素,但有時候這並不是我們期望的。我們期待的是Figure2如圖:
五、總結
以上就是float有關的內容，內容涉及比較多，這也反映出float的重要性，關於float的應用場景非常多。