大家好，我是IT修真院鄭州分院第四期的學(xué)員王相博，一枚正直、純潔、善良的前端程序員
今天給大家分享一下，修真院官網(wǎng)CSS（職業(yè)）任務(wù)1，深度思考中的知識(shí)點(diǎn)——什么是浮動(dòng)？有哪些消除浮動(dòng)的方法？
1.背景介紹
浮動(dòng)是怎么誕生的？浮動(dòng)最初設(shè)計(jì)的目的并沒那么多事兒，就只是用來實(shí)現(xiàn)文字環(huán)繞效果而已。
但是早期的前端開發(fā)者發(fā)現(xiàn)：浮動(dòng)的元素可以設(shè)置寬高并且可以內(nèi)聯(lián)排列，是介于inline和block之間的一個(gè)神奇的存在， 在inline-block出來之前，浮動(dòng)大行其道。直到inline-block出來后，浮動(dòng)也有它自己獨(dú)特的使用場景。
2.知識(shí)剖析
浮動(dòng)到底是什么？ 浮動(dòng)核心就一句話：浮動(dòng)元素會(huì)脫離文檔流并向左/向右浮動(dòng)，直到碰到父元素或者另一個(gè)浮動(dòng)元素。請(qǐng)默念3次！提到文檔流，那 下面我們講講什么是文檔流。
2.1 文檔流的概念
文檔流是文檔中可顯示對(duì)象在排列時(shí)所占用的位置。
將窗體自上而下分成一行行顯示，并在每行中按從左到右的順序排放元素的效果，就是文檔流直觀的表現(xiàn)。
2.2 浮動(dòng)，脫離文檔流
通過使用浮動(dòng)屬性，可以使元素脫離文檔流，上浮到文檔流之上，隨后可以改變其位置的現(xiàn)象。參看下邊的圖片,浮動(dòng)的綠色塊已經(jīng)上天了，跟藍(lán)紅 兩個(gè)塊已經(jīng)不再一個(gè)層面上了。
2.3 浮動(dòng)的屬性值
浮動(dòng)的屬性值有三個(gè)：float：none；float：left；float：right；
浮動(dòng)不是任意的，其還是在父元素的范圍之中，不能脫離于父元素的內(nèi)容區(qū)域。
我們回到前面那個(gè)頁面看看，浮動(dòng)元素能不能浮動(dòng)到父元素外面去
3.常見問題及為什么要清除浮動(dòng)
如果我們不給父元素設(shè)置高度，我們知道如果它里面的元素不浮動(dòng)的話， 那么這個(gè)外層的高是會(huì)自動(dòng)被撐開的。
若浮動(dòng)元素比它的父元素還高，那么它就會(huì)溢出父元素外面，點(diǎn)我看浮動(dòng)元素溢出
當(dāng)內(nèi)層元素所有浮動(dòng)后，則影響更大：
（1）背景不能顯示
（2）邊框不能撐開
（3）高度塌陷等
我們還是回到前面那個(gè)網(wǎng)頁看看，是不是有這些影響點(diǎn)我
4.解決方案
方法1：父級(jí)div定義 height
原理：父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無法自動(dòng)獲取到高度的問題。
優(yōu)點(diǎn)：簡單、代碼少、容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問題
建議：不推薦使用，只建議父元素高度固定的布局時(shí)使用
方法2：
使用clear屬性：在相同的父元素中，浮動(dòng)的子元素之后添加一個(gè)空標(biāo)簽，設(shè)置樣式為："clear：both;"標(biāo)簽可以是div，也可以是p，或者br等塊元素。
原理：left在左側(cè)不允許浮動(dòng)元素; right在右側(cè)不允許浮動(dòng)元素; both在左右兩側(cè)均不允許浮動(dòng)元素點(diǎn)我使用clear屬性
優(yōu)點(diǎn)：通俗易懂，容易掌握，適合菜鳥前期使用。
缺點(diǎn)：可以想象通過此方法，會(huì)添加多少無意義的空標(biāo)簽，有違結(jié)構(gòu)與表現(xiàn)的分離，一旦代碼量大的話，在后期維護(hù)中將是噩夢(mèng)。
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動(dòng)方法。
方法3：對(duì)父元素設(shè)置overflow的樣式，即overflow: auto/hidden;
原理：必須定義width，在IE6中還需要觸發(fā) hasLayout ，例如 zoom：1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語義化問題，代碼量極少
缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，不能和position配合使用，無法顯示需要溢出的元素；
建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用。
方法四：據(jù)說是最高大上的方法:after（注意：作用于浮動(dòng)元素的父親）
它就是利用:after和:before來在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動(dòng)的效果。 其實(shí)現(xiàn)原理類似于clear:both方法，只是區(qū)別在于:clear在html插入一個(gè)div.clear標(biāo)簽， 而outer利用其偽類clear:after在元素內(nèi)部增加一個(gè)類似于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)會(huì)造成代碼量增加，初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。
建議：推薦使用，建議定義公共類，以減少CSS代碼。
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
問題: 大家還知道哪些清除浮動(dòng)的方法？
7.參考文獻(xiàn)
參考二：學(xué)習(xí)CSS布局
參考三：css清除浮動(dòng)float的三種方法總結(jié)
8.更多討論
討論點(diǎn)：float浮動(dòng)會(huì)使元素脫離文檔流，那使用position屬性的原理進(jìn)行元素的定位是不是和它是一樣使元素脫離文檔流呢？假如脫離的話，他們是不是浮動(dòng)到同一個(gè)層面上了？
PPT鏈接：地址
文本地址：地址
視頻地址：（因多次轉(zhuǎn)碼失敗，暫不上傳）
