淺談 CSS 清除浮動的 6 種方法

WalkerXu 發(fā)布于2019-08-28 18:20 / 2976人閱讀

摘要：如果要解決可以參考前面的辦法。例如父元素處于絕對定位與上一個方法同理，由于絕對定位已脫離正常文檔流，故出現(xiàn)相同情況，解決辦法依舊可以使用以上辦法結(jié)合，靈活多變。

額外標簽法

使用:after 偽元素

給父元素定高

利用overflow:hidden;屬性

父元素浮動

父元素處于絕對定位

在開發(fā)網(wǎng)頁的時候經(jīng)常需要用到各種浮動，此時便需要及時的清除浮動，否則將會導(dǎo)致布局出現(xiàn)問題

引出問題：

可以看出本應(yīng)包住3個 inner DIV的 outer DIV 卻沒有包住他們，此刻只剩一條由上下邊框貼合組成的線，同時 footer DIV元素也跑到了三個浮動元素的底下

解決辦法：

1. 使用額外標簽法

這是早期普遍使用的方法，但是對于有代碼潔癖的人來說，解決的不夠完美

2. 使用 :after 為元素

3. 給父元素定高

4. 利用 overflow:hidden 屬性

5. 父元素浮動

當(dāng)父元素浮動的時候，無需為子元素的浮動清除浮動,布局時經(jīng)常用到

可以看出雖然 outer DIV 消除了塌陷現(xiàn)象，但由于其也發(fā)生了浮動故，其后元素若處于正常文檔流，會被跌在底下。

如果要解決可以參考前面的辦法。

例如：

6. 父元素處于絕對定位

與上一個方法同理，由于絕對定位已脫離正常文檔流，故出現(xiàn)相同情況，解決辦法依舊可以使用以上辦法結(jié)合，靈活多變。

GPU云服務(wù)器云服務(wù)器的清除方法清除浮動在家賺錢的十種方法數(shù)據(jù)遷移的四種方法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111185.html

相關(guān)文章

淺談 CSS 中的偽類 after

摘要：而不會因為高度塌陷而被隱藏在內(nèi)部浮動的子元素下。若果不考慮的高度塌陷問題，直接在其弟元素處設(shè)置屬性即可。開始我誤認為了是將中的內(nèi)容插入至被選元素的弟元素位置上。中的示例從這個示例可以看出，偽類內(nèi)容的默認方式應(yīng)該為內(nèi)聯(lián)。 1. 引子前段時間學(xué)習(xí) web 布局的時候，因為要用浮動 float 屬性，所以就順理成章地碰到了清除浮動 clear 屬性。教學(xué)的案例中是用新建一個空的 div ...

shinezejian 2019-08-28 18:07 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

stormgens 2019-08-22 15:34 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

Hujiawei 2019-08-01 18:43 評論0 收藏0
淺談面試中?？?em>的兩種經(jīng)典布局——圣杯與雙飛翼

摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫這種布局，一直沒有總結(jié)過正好借這次機會總結(jié)一波，同時加強一下自己的理解。使用雙飛翼布局就可以避免這個問題。雙飛翼布局則是中間欄不變，將內(nèi)容部分為兩邊騰開位置參考圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫這種布局，一直沒有總結(jié)過...

SwordFly 2019-08-30 13:58 評論0 收藏0