什么是浮動絮重?有哪些消除浮動的方法?

大家好歹苦,我是IT修真院鄭州分院第四期的學(xué)員王相博青伤,一枚正直、純潔殴瘦、善良的前端程序員

今天給大家分享一下狠角,修真院官網(wǎng)CSS(職業(yè))任務(wù)1,深度思考中的知識點(diǎn)——什么是浮動蚪腋?有哪些消除浮動的方法丰歌?

1.背景介紹

浮動是怎么誕生的?浮動最初設(shè)計的目的并沒那么多事兒屉凯,就只是用來實(shí)現(xiàn)文字環(huán)繞效果而已立帖。

點(diǎ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ū)域。

我們回到前面那個頁面看看拇泣,浮動元素能不能浮動到父元素外面去

點(diǎn)我

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)生問題

建議:不推薦使用,只建議父元素高度固定的布局時使用

點(diǎn)我設(shè)置高度

方法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理解比較深的朋友使用。

點(diǎn)我設(shè)置overflow

方法四:據(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)

參考一:清除浮動(clearfix)的幾種方式

參考二:學(xué)習(xí)CSS布局

參考三:css清除浮動float的三種方法總結(jié)

參考四:CSS清除浮動常用方法小結(jié)

8.更多討論

討論點(diǎn):float浮動會使元素脫離文檔流艺普,那使用position屬性的原理進(jìn)行元素的定位是不是和它是一樣使元素脫離文檔流呢?假如脫離的話鉴竭,他們是不是浮動到同一個層面上了歧譬?

PPT鏈接:地址

文本地址:地址

視頻地址:(因多次轉(zhuǎn)碼失敗,暫不上傳)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末搏存,一起剝皮案震驚了整個濱河市瑰步,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌祭埂,老刑警劉巖面氓,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蛆橡,居然都是意外死亡舌界,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進(jìn)店門泰演,熙熙樓的掌柜王于貴愁眉苦臉地迎上來呻拌,“玉大人,你說我怎么就攤上這事睦焕∶晡眨” “怎么了?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵垃喊,是天一觀的道長猾普。 經(jīng)常有香客問我,道長本谜,這世上最難降的妖魔是什么初家? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮乌助,結(jié)果婚禮上溜在,老公的妹妹穿的比我還像新娘。我一直安慰自己他托,他們只是感情好掖肋,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著赏参,像睡著了一般志笼。 火紅的嫁衣襯著肌膚如雪沿盅。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天籽腕,我揣著相機(jī)與錄音嗡呼,去河邊找鬼。 笑死皇耗,一個胖子當(dāng)著我的面吹牛南窗,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播郎楼,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼万伤,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了呜袁?” 一聲冷哼從身側(cè)響起敌买,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎阶界,沒想到半個月后虹钮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡膘融,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年芙粱,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片氧映。...
    茶點(diǎn)故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡春畔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出岛都,到底是詐尸還是另有隱情律姨,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布臼疫,位于F島的核電站择份,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏烫堤。R本人自食惡果不足惜缓淹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望塔逃。 院中可真熱鬧,春花似錦料仗、人聲如沸湾盗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽格粪。三九已至躏吊,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間帐萎,已是汗流浹背比伏。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留疆导,地道東北人赁项。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像澈段,于是被迫代替她去往敵國和親悠菜。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容