1.什么是浮動(dòng)凹蜂？
浮動(dòng)，CSS中用float定義，顧名思義系列玛痊。我個(gè)人理解為一個(gè)封閉的汰瘫，裝了水的盒子內(nèi)中的一塊泡沫。為什么說(shuō)是泡沫擂煞？首先它可以漂浮起來(lái)混弥，水面(非浮動(dòng)元素）是無(wú)視它的。然后它有一定的體積对省，與水面也有接觸蝗拿，會(huì)把其他東西排擠出去（文字環(huán)繞等）。最后它在水面之上蒿涎，所以不在文檔流（水面的水流）內(nèi)哀托。
2.浮動(dòng)是如何工作的？
浮動(dòng)的設(shè)計(jì)初衷是用于浮動(dòng)圖像內(nèi)的文本塊（出自MDN）劳秋，這一點(diǎn)我認(rèn)為很重要仓手。那么，所有對(duì)浮動(dòng)的理解都應(yīng)該不違背這個(gè)初衷玻淑，否則會(huì)造成不必要的學(xué)習(xí)成本俗或。也許最開(kāi)始設(shè)計(jì)浮動(dòng)的時(shí)候根本沒(méi)有想過(guò)可以用它來(lái)布局吧...
浮動(dòng)的工作方式在我的理解，就是從文檔流（整個(gè)Body）中取出一部分岁忘，然后把它變成泡沫辛慰，讓它浮在水面（文檔流）上。
3.為什么需要浮動(dòng)干像？（浮動(dòng)的作用）
html元素有兩種狀態(tài)：
1.塊元素帅腌。2.內(nèi)聯(lián)元素。
塊元素有物理屬性麻汰，會(huì)占據(jù)一行速客，能設(shè)置寬高等特性，多個(gè)塊元素會(huì)分行顯示五鲫。比如：div,p 溺职。而內(nèi)聯(lián)元素沒(méi)有物理屬性，不會(huì)占據(jù)一行位喂，多個(gè)內(nèi)聯(lián)元素會(huì)并排顯示浪耘。比如：Span,em,b,i等。
但是有些時(shí)候塑崖，我想讓某些元素并排顯示七冲，但是又想設(shè)置它們的物理屬性，而HTML是表結(jié)構(gòu)规婆，并不負(fù)責(zé)表現(xiàn)層的東西澜躺。這個(gè)時(shí)候使用塊或者內(nèi)聯(lián)蝉稳，都不能夠滿足我的需求。
那么掘鄙，float的使用應(yīng)運(yùn)而生耘戚。它讓塊元素對(duì)外呈現(xiàn)了內(nèi)聯(lián)元素的特性，對(duì)內(nèi)呈現(xiàn)了塊元素的特性操漠。
4.為什么要清除浮動(dòng)收津？
因?yàn)椋?dòng)是有副作用的颅夺。浮動(dòng)會(huì)讓元素脫離文檔流，但是其實(shí)還是會(huì)影響不浮動(dòng)元素的蛹稍。因?yàn)樗鼤?huì)讓浮動(dòng)元素的周?chē)乇憩F(xiàn)的如同浮動(dòng)元素不存在一樣吧黄。其中：
塊狀元素：鉆進(jìn)浮動(dòng)元素之下，被浮動(dòng)元素所覆蓋唆姐。
行內(nèi)元素：環(huán)繞在浮動(dòng)元素周?chē)挚瑸楦?dòng)元素留出空間。
父元素：坍縮奉芦。
為了不出現(xiàn)這些情況赵抢，我們需要清除浮動(dòng)。
5.常用的清除浮動(dòng)方法有哪些声功？
（1）添加新的元素烦却，并應(yīng)用clear:both;
(2) 給父級(jí)元素定義overflow(一般設(shè)置為auto/hidden)
(3)重要，盡量使用這種先巴。偽類(lèi)選擇器after法其爵。利用after和 before在元素內(nèi)部插入兩個(gè)元素塊，來(lái)達(dá)到清除浮動(dòng)的效果伸蚯。原理類(lèi)似于方法（1）摩渺，但是因?yàn)槭莻晤?lèi)選擇器，所以可使結(jié)構(gòu)更加清晰剂邮。例如：
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
.outer :after {
clear:both;
