css中的float（浮動(dòng)）：
在css中浮動(dòng)的作用可讓元素脫離文檔流，從而達(dá)到某種布局效果
- float：left鸳君，可以讓元素向左浮動(dòng)，元素會(huì)浮動(dòng)到父元素的左邊緣，由于脫離了文檔流皆的，所以處于正常文檔流內(nèi)的元素會(huì)后來(lái)居上，相應(yīng)的浮動(dòng)元素會(huì)蓋在位于它之后蹋盆，且和它處于同一父元素內(nèi)的元素上面费薄。
<pre>
<code><div class="container"></code>
<code><div class="elem-1"></div></code>
<code><div class="elem-2"></div></code>
<code><div class="elem-3"></div></code>
<code></div></code>
</pre><pre>// float 1
.container {
border: 3px solid blue;
padding: 10px;
}
.elem-1 {
width: 80px;
height: 80px;
background-color: green;
}
.elem-2 {
width: 100px;
height: 100px;
background-color: yellow;
}
.elem-3 {
width: 120px;
height: 120px;
background-color: red;
}
// float 2
.elem-1 {
width: 80px;
height: 80px;
float: left;
background-color: green;
}
</pre>
當(dāng)我給elem-1加上float:left之后硝全，elem-1脫離文檔流，且浮動(dòng)于elem-2之上
float-1 添加float之前.png
float-2 加上float之后.png
如果我給所有elem都加上float：left之后楞抡，它們都會(huì)脫離文檔流伟众，且會(huì)按照浮動(dòng)方向依次排列，一個(gè)元素內(nèi)部所有子元素都處于浮動(dòng)狀態(tài)時(shí)召廷，父元素會(huì)出現(xiàn)塌陷的情況凳厢，也就是身體被掏空
<pre>// float 3
.elem-2 {
width: 100px;
height: 100px;
float: left;
background-color: yellow;
}
.elem-3 {
width: 120px;
height: 120px;
float: left;
background-color: red;
}
</pre>
float-3.png
但注意到元素float：left之后，雖然脫離文檔流竞慢，但還是會(huì)浮動(dòng)到content的邊緣先紫，并不會(huì)超出padding - 浮動(dòng)的結(jié)果
元素的浮動(dòng)會(huì)在頁(yè)面布局的過(guò)程中很方便，但造成的影響有時(shí)也會(huì)讓人很頭疼筹煮，元素塌陷就是其中一個(gè)弊端遮精。
由上面的例子可以看出，元素的浮動(dòng)败潦，會(huì)影響到其后相鄰的元素（elem1浮動(dòng)于elem2上本冲，蓋住了elem2的內(nèi)容），同時(shí)浮動(dòng)會(huì)造成的一個(gè)結(jié)果就是<u>產(chǎn)生一個(gè)BFC的context</u>, 這個(gè)我們之后在繼續(xù)說(shuō)明BFC是個(gè)什么鬼 - 清除浮動(dòng)
為了處理由于用了浮動(dòng)劫扒，一時(shí)開(kāi)心而埋下的隱患檬洞，你就必須得知道清除浮動(dòng)的一些方法。
常用的一些方法有
- 在其相鄰元素上加上<code>clear:left/right/both;</code>這個(gè)css樣式沟饥，
<pre>
<div class="container">
<code> ...</code>
<code> ...</code>
<code> ...</code>
<code> <div class="elem-4" style="clear:left"></div></code>
</div>
</pre>
這種清除浮動(dòng)的方式很容易理解添怔，浮動(dòng)會(huì)給緊鄰的元素造成布局影響，那我在它的緊鄰元素上清除掉浮動(dòng)就好了
float-4.png
所以這樣贤旷，浮動(dòng)造成的塌陷問(wèn)題就被解決了澎灸，同時(shí)，內(nèi)部的浮動(dòng)元素還能享受到浮動(dòng)帶來(lái)的不一樣的橫向block排列方式遮晚，而不用你去設(shè)置<code>display: inline-block;</code>這個(gè)屬性了性昭，而且inline-block 的設(shè)置會(huì)有個(gè)小缺陷，并排的行內(nèi)塊級(jí)元素中間會(huì)有大約4px的間距县遣，所以通常又需要<code>margin-right: -4px;</code>來(lái)解決這一問(wèn)題糜颠，并不是特別方便，而浮動(dòng)能幫你輕易的實(shí)現(xiàn)這種布局效果 - 在浮動(dòng)元素的父元素上添加偽元素清除浮動(dòng)
<pre>
.container:after {
content: '';
display: table;
clear: both;
}
</pre>
這種方法相比較上一種添加一個(gè)沒(méi)太大意義的html元素來(lái)說(shuō)更合理一些萧求，它采用給父元素加偽類的方法來(lái)清除子元素浮動(dòng)帶來(lái)的布局影響其兴，同樣能夠達(dá)到圖float-4的效果，這里需要注意的有兩點(diǎn)夸政，1?? content元旬，是偽元素中必須的一個(gè)屬性，但你可以設(shè)一個(gè)空值。2?? display的設(shè)置匀归，display可以設(shè)置成block也可以設(shè)制成table坑资，都會(huì)有清除浮動(dòng)的效果，但通常情況下都會(huì)設(shè)置table穆端，因?yàn)橄啾萣lock袱贮，table不容易影響其他頁(yè)面元素的布局。
上述兩種方法都是比較常規(guī)的利用clear屬性來(lái)清除浮動(dòng)的不同做法体啰，但清除浮動(dòng)還有的一種做法是構(gòu)造一個(gè)BFC（Block Formatting Context）容器攒巍，聽(tīng)起來(lái)似乎會(huì)比較麻煩，好像很難的樣子荒勇，但實(shí)際并非如此柒莉，在下一節(jié)會(huì)給大家做BFC的介紹，以及用它清除浮動(dòng)的辦法沽翔。
