1. 什么是浮動(dòng)
當(dāng)元素的 float 屬性不為 none 時(shí)就產(chǎn)生了浮動(dòng)。
2. 浮動(dòng)影響
- 浮動(dòng)元素的外邊距不會(huì)合并。
- 浮動(dòng)非替換元素時(shí)必須設(shè)定寬度。
- 浮動(dòng)元素會(huì)脫離文檔流但不會(huì)脫離文本流，因而會(huì)造成文本環(huán)繞效果，而這也是浮動(dòng)的本意。
- 不管是塊級(jí)元素還是內(nèi)聯(lián)元素，一旦浮動(dòng)就會(huì)變成行內(nèi)塊元素（即display: inline-block;）
- 如果浮動(dòng)元素應(yīng)用了負(fù)外邊距而導(dǎo)致其與相鄰元素重疊，分兩種情況：
- 行內(nèi)框與一個(gè)浮動(dòng)元素重疊時(shí)，其邊框、背景和內(nèi)容都在該浮動(dòng)元素之上顯示。
- 塊框與一個(gè)浮動(dòng)元素重疊時(shí)，其邊框和背景都在該浮動(dòng)元素之下顯示，而內(nèi)容在浮動(dòng)元素之上顯示。
3.清除浮動(dòng)
上面提到過浮動(dòng)元素是不具備高度的，因此會(huì)造成父元素高度塌陷，可以通過以下方法來清除浮動(dòng)。不僅要知道什么方式可以清除浮動(dòng)，更要知道這些方法是如何清除浮動(dòng)的。
1.浮動(dòng)父元素
CSS 2.1中提到了浮動(dòng)的一個(gè)特性：浮動(dòng)元素會(huì)延伸，從而包含其所有后代元素。但這有點(diǎn)拆了東墻補(bǔ)西墻的意味，不推薦。
應(yīng)用對(duì)象：父元素
2.overflow屬性
overflow 屬性本意是規(guī)定了當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。但當(dāng)其屬性值為hidden或auto時(shí)，它會(huì)自動(dòng)的清理包含的任何浮動(dòng)元素，也就意味著它是認(rèn)可浮動(dòng)元素的高度的。但在某些情況下，使用該方法會(huì)產(chǎn)生滾動(dòng)條或截?cái)鄡?nèi)容。所以使用時(shí)需謹(jǐn)慎。
應(yīng)用對(duì)象：父元素
3.clear屬性
clear屬性會(huì)給該元素添加足夠的外邊距，從而達(dá)到清除浮動(dòng)的效果。clear 屬性的值可以是：left、right、both或none。
應(yīng)用對(duì)象：相鄰元素
4.偽元素
在沒有現(xiàn)成元素可以應(yīng)用clear屬性時(shí)，我們可以使用偽元素：
.clearfix::after {
content: '';
display: block;
visibility: hidden;
height: 0;
clear: both;
}
注：after 會(huì)在元素內(nèi)容后面而不是元素后面插入一個(gè)偽元素。
應(yīng)用對(duì)象：父元素
5.空元素
當(dāng)然，我們也可以直接在浮動(dòng)元素后面添加一個(gè)空元素，如下：
<div style="clear:both;"></div>
同樣可以達(dá)到清除浮動(dòng)的效果，但會(huì)增加不必要的代碼，不推薦。
