資訊專欄INFORMATION COLUMN
摘要：清除浮動(dòng)，為何要清除浮動(dòng)浮動(dòng)效果會(huì)帶來(lái)不好的影響子元素浮動(dòng)會(huì)帶來(lái)父元素高度塌陷。，清除浮動(dòng)的兩大基本方式，運(yùn)用清除浮動(dòng)。元素流入頁(yè)面時(shí)，在這個(gè)元素左邊右邊或兩邊不允許有浮動(dòng)內(nèi)容。除了是用來(lái)清除浮動(dòng)的，其它代碼都是為了隱藏掉生成的內(nèi)容。
清除浮動(dòng) 1，為何要清除浮動(dòng)
浮動(dòng)效果會(huì)帶來(lái)不好的影響： 子元素浮動(dòng)會(huì)帶來(lái)父元素高度塌陷。
具體解釋：
當(dāng)浮動(dòng)框高度超出包含框時(shí)，包含框不會(huì) 自動(dòng)伸高 來(lái)閉合浮動(dòng)元素，會(huì)出現(xiàn)“高度塌陷”現(xiàn)象。正是因?yàn)楦?dòng)的這種特性，導(dǎo)致本屬于普通流中的元素 浮動(dòng)后，包含框內(nèi)部由于不存在其他普通流元素了，也就表現(xiàn)出高度為0，在實(shí)際布局中，這并不是我們所希望的，所以需要閉合浮動(dòng)元素，使包含框表現(xiàn)出正常的高度。
舉例說(shuō)明：
1）下圖所示：普通流中，父元素container1高度為 3個(gè)div撐起的高度。
2）現(xiàn)在想要三個(gè)div并排顯示，則將3個(gè)div設(shè)置float:left;效果如下。
問(wèn)題出現(xiàn)了：父元素container1 高度塌陷了。
3）父元素container1高度塌陷，則其下方的元素會(huì)跑上來(lái)。
強(qiáng)調(diào)：
1）正常情況下：div中如果有內(nèi)容，它能被內(nèi)容撐出高度，但如果其中的內(nèi)容是浮動(dòng)的，則撐不起高度了，其高度變?yōu)?。
2）在上述例子中，container1本來(lái)是被撐出了高度的，但由于給div1,2,3設(shè)置了浮動(dòng)，因此其高度沒(méi)有了，變?yōu)榱?。
1，運(yùn)用clear:both;
clear:both; 清除浮動(dòng)。元素流入頁(yè)面時(shí)，在這個(gè)元素左邊、右邊或兩邊不允許有浮動(dòng)內(nèi)容。
1） “內(nèi)墻法”： 在浮動(dòng)元素最后添加一個(gè)冗余元素，并為其設(shè)置clear:both;
代碼如下圖：
原理：
由于它左右兩邊不能有浮動(dòng)元素，因此，它會(huì)跑到浮動(dòng)元素下方，而container1父元
素需要包裹住#cl ，其高度就被撐開(kāi)了。注：#cl div其高度為0；
缺點(diǎn)：要在頁(yè)面中添加沒(méi)有意義的冗余元素，比較麻煩，而且不符合語(yǔ)義化。
2）clearfix:after 偽元素方法：給父元素添加一個(gè)clear類，既方便又符合語(yǔ)義化。
原理: 為了減少寫一個(gè)無(wú)意義的div 元素，在clearfix 內(nèi)容后面使用after添加一個(gè)content充當(dāng)“元素”。
通過(guò)content:“.”；生成內(nèi)容作為最后一個(gè)元素。
display:block; 使生成的元素以塊級(jí)元素顯示；
height:0; 避免生成內(nèi)容破壞原有布局的高度；
visibility:hidden;使生成的內(nèi)容不可見(jiàn)；
zoom:1；觸發(fā) IE hasLayout。
除了clear:both;是用來(lái)清除浮動(dòng)的，其它代碼都是為了隱藏掉content生成的內(nèi)容。
更精簡(jiǎn)的寫法：
附上content和after用法:
after用法舉例：在container1尾部添加1個(gè)content，頁(yè)面效果如下圖所示。
2，父元素BFC或haslayout
父元素設(shè)置` overflow: hidden;
BFC相關(guān)知識(shí)還未完全理解，理解后再詳細(xì)寫。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116752.html
摘要：浮動(dòng)元素性質(zhì)，浮動(dòng)的元素脫離標(biāo)準(zhǔn)流這個(gè)元素像從標(biāo)準(zhǔn)流中被刪除一樣。下圖是左浮動(dòng)時(shí)的顯示效果。，浮動(dòng)的元素會(huì)互相貼靠如果父元素的寬度能顯示所有浮動(dòng)元素，則浮動(dòng)的元素會(huì)并排顯示。，無(wú)論是塊級(jí)元素行內(nèi)元素，一旦浮動(dòng)了，都可以設(shè)置寬高，不需要用。 浮動(dòng) 1.1、語(yǔ)法： float: left; 左浮動(dòng)，元素往最左邊靠； float: right; 右浮動(dòng)，元素往最右邊靠 1.2...
摘要：內(nèi)聯(lián)元素在水平方向上相互挨著，總體上會(huì)從左上方流向右下方。，增加元素，設(shè)置屬性，兩個(gè)內(nèi)聯(lián)元素并排擺放，但只有左右方向有。還能與其它內(nèi)聯(lián)元素并排。 寫在前面：作為一個(gè)剛開(kāi)始寫技術(shù)博客的新手，看到有人收藏了文章，寫作動(dòng)力又猛增了。這應(yīng)該就是寫技術(shù)博客的好處之一：能給自己增加成就感和驅(qū)動(dòng)力。最近關(guān)于css布局和定位相關(guān)內(nèi)容整理地有點(diǎn)慢，因?yàn)橥瑫r(shí)在做freecodecamp上的題，所以節(jié)奏有點(diǎn)...
摘要：布局經(jīng)典問(wèn)題初步整理標(biāo)簽前端本文主要對(duì)布局中常見(jiàn)的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問(wèn)題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對(duì) CSS 布局中常見(jiàn)的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...
摘要：會(huì)在元素內(nèi)容而不是元素后插入一個(gè)偽元素使用意味著中新增的子元素會(huì)被清除左右浮動(dòng)元素。這一篇主要介紹了盒子模型，浮動(dòng)和清除。 這是CSS設(shè)計(jì)指南的讀書(shū)筆記，用于加深學(xué)習(xí)效果。 上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動(dòng)。 盒子模型 所謂盒子模型，就是瀏覽器為頁(yè)面中的每個(gè)HTML元素生成的矩形盒子。這些盒子們都要按照可見(jiàn)版式模型在頁(yè)面上排布。 可見(jiàn)的頁(yè)面版式主要由三個(gè)屬性...
摘要：會(huì)在元素內(nèi)容而不是元素后插入一個(gè)偽元素使用意味著中新增的子元素會(huì)被清除左右浮動(dòng)元素。這一篇主要介紹了盒子模型，浮動(dòng)和清除。 這是CSS設(shè)計(jì)指南的讀書(shū)筆記，用于加深學(xué)習(xí)效果。 上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動(dòng)。 盒子模型 所謂盒子模型，就是瀏覽器為頁(yè)面中的每個(gè)HTML元素生成的矩形盒子。這些盒子們都要按照可見(jiàn)版式模型在頁(yè)面上排布。 可見(jiàn)的頁(yè)面版式主要由三個(gè)屬性...
閱讀 748·2021-11-23 09:51
閱讀 2451·2021-10-11 11:10
閱讀 1322·2021-09-23 11:21
閱讀 1103·2021-09-10 10:50
閱讀 899·2019-08-30 15:54
閱讀 3340·2019-08-30 15:53
閱讀 3302·2019-08-30 15:53
閱讀 3200·2019-08-29 17:23
