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