大家好歹苦，我是IT修真院鄭州分院第四期的學(xué)員王相博青伤，一枚正直、純潔殴瘦、善良的前端程序員
今天給大家分享一下狠角，修真院官網(wǎng)CSS（職業(yè)）任務(wù)1，深度思考中的知識點(diǎn)——什么是浮動蚪腋？有哪些消除浮動的方法丰歌？
1.背景介紹
浮動是怎么誕生的？浮動最初設(shè)計的目的并沒那么多事兒屉凯，就只是用來實(shí)現(xiàn)文字環(huán)繞效果而已立帖。
但是早期的前端開發(fā)者發(fā)現(xiàn)：浮動的元素可以設(shè)置寬高并且可以內(nèi)聯(lián)排列，是介于inline和block之間的一個神奇的存在悠砚， 在inline-block出來之前晓勇，浮動大行其道。直到inline-block出來后，浮動也有它自己獨(dú)特的使用場景绑咱。
2.知識剖析
浮動到底是什么绰筛？ 浮動核心就一句話：浮動元素會脫離文檔流并向左/向右浮動，直到碰到父元素或者另一個浮動元素描融。請默念3次铝噩！提到文檔流，那 下面我們講講什么是文檔流稼稿。
2.1 文檔流的概念
文檔流是文檔中可顯示對象在排列時所占用的位置薄榛。
將窗體自上而下分成一行行顯示，并在每行中按從左到右的順序排放元素的效果让歼，就是文檔流直觀的表現(xiàn)敞恋。
2.2 浮動，脫離文檔流
通過使用浮動屬性谋右，可以使元素脫離文檔流硬猫，上浮到文檔流之上，隨后可以改變其位置的現(xiàn)象改执。參看下邊的圖片,浮動的綠色塊已經(jīng)上天了啸蜜，跟藍(lán)紅 兩個塊已經(jīng)不再一個層面上了。
2.3 浮動的屬性值
浮動的屬性值有三個：float：none辈挂；float：left衬横；float：right；
浮動不是任意的终蒂，其還是在父元素的范圍之中蜂林，不能脫離于父元素的內(nèi)容區(qū)域。
我們回到前面那個頁面看看拇泣，浮動元素能不能浮動到父元素外面去
3.常見問題及為什么要清除浮動
如果我們不給父元素設(shè)置高度噪叙，我們知道如果它里面的元素不浮動的話， 那么這個外層的高是會自動被撐開的霉翔。
若浮動元素比它的父元素還高睁蕾，那么它就會溢出父元素外面，點(diǎn)我看浮動元素溢出
當(dāng)內(nèi)層元素所有浮動后债朵，則影響更大：
（1）背景不能顯示
（2）邊框不能撐開
（3）高度塌陷等
我們還是回到前面那個網(wǎng)頁看看子眶，是不是有這些影響點(diǎn)我
4.解決方案
方法1：父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題葱弟。
優(yōu)點(diǎn)：簡單壹店、代碼少、容易掌握
缺點(diǎn)：只適合高度固定的布局芝加，要給出精確的高度硅卢，如果高度和父級div不一樣時射窒，會產(chǎn)生問題
建議：不推薦使用，只建議父元素高度固定的布局時使用
方法2：
使用clear屬性：在相同的父元素中将塑，浮動的子元素之后添加一個空標(biāo)簽脉顿，設(shè)置樣式為："clear：both;"標(biāo)簽可以是div，也可以是p点寥，或者br等塊元素艾疟。
原理：left在左側(cè)不允許浮動元素; right在右側(cè)不允許浮動元素; both在左右兩側(cè)均不允許浮動元素點(diǎn)我使用clear屬性
優(yōu)點(diǎn)：通俗易懂，容易掌握敢辩，適合菜鳥前期使用蔽莱。
缺點(diǎn)：可以想象通過此方法，會添加多少無意義的空標(biāo)簽戚长，有違結(jié)構(gòu)與表現(xiàn)的分離盗冷，一旦代碼量大的話，在后期維護(hù)中將是噩夢同廉。
建議：不推薦使用仪糖，但此方法是以前主要使用的一種清除浮動方法。
方法3：對父元素設(shè)置overflow的樣式迫肖，即overflow: auto/hidden;
原理：必須定義width锅劝，在IE6中還需要觸發(fā) hasLayout ，例如 zoom：1蟆湖，同時不能定義height故爵，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語義化問題隅津，代碼量極少
缺點(diǎn)：內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉稠集，不能和position配合使用，無法顯示需要溢出的元素饥瓷；
建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用。
方法四：據(jù)說是最高大上的方法:after（注意：作用于浮動元素的父親）
它就是利用:after和:before來在元素內(nèi)部插入兩個元素塊痹籍，從面達(dá)到清除浮動的效果呢铆。 其實(shí)現(xiàn)原理類似于clear:both方法，只是區(qū)別在于:clear在html插入一個div.clear標(biāo)簽蹲缠， 而outer利用其偽類clear:after在元素內(nèi)部增加一個類似于div.clear的效果(clearfix用在父元素上面)棺克。下面來看看其具體的使用方法：點(diǎn)我使用clearfix
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
優(yōu)點(diǎn)：結(jié)構(gòu)和語義化完全正確,代碼量居中。瀏覽器兼容性強(qiáng)线定，支持好娜谊、不容易出現(xiàn)怪問題（ 知乎，Apple斤讥，stackoverflow等都是使用的這種方法）
缺點(diǎn)：復(fù)用方式不當(dāng)會造成代碼量增加纱皆，初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。
建議：推薦使用派草，建議定義公共類搀缠，以減少CSS代碼。
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
問題: 大家還知道哪些清除浮動的方法近迁？
7.參考文獻(xiàn)
參考二：學(xué)習(xí)CSS布局
8.更多討論
討論點(diǎn)：float浮動會使元素脫離文檔流艺普，那使用position屬性的原理進(jìn)行元素的定位是不是和它是一樣使元素脫離文檔流呢？假如脫離的話鉴竭，他們是不是浮動到同一個層面上了歧譬？
PPT鏈接：地址
文本地址：地址
視頻地址：（因多次轉(zhuǎn)碼失敗，暫不上傳）
