大家好歹苦,我是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)碼失敗,暫不上傳)