CSS清除浮動的四種方法

2021-10-10 02:53:07 字數 534 閱讀 7159

浮動能實現網頁排版布局,但是同樣也會給網頁帶來一定的問題(父盒子高度塌陷),下面我們就整理一下幾種清楚浮動的方法

缺點:使用不靈活,後期不易維護

例:     

child

在浮動元素的後面加乙個空的塊級元素(通常是div),設定該元素clear:both;屬性。

缺點:結構冗餘

例:

child

延續內牆法,利用偽元素清除浮動

例:

child

overflow: hidden;會形成乙個bfc區域,浮動和清除浮動智慧型應用到當前bfc區域,

浮動不會影響其它bfc中元素的布局,而清除浮動只能清除同一bfc中在它前面的元素的浮動

例:

child

第四種最簡便,根據情況選擇使用第三第四種

css清除浮動四種方法

清除浮動的本質是清除浮動元素脫離標準流造成的影響。為什麼要清楚浮動?父級沒高度 子盒子浮動了 影響下面布局,我們就應該清除浮動了。清除浮動的四種方法 1.額外標籤法。在最後乙個浮動標籤之後新增乙個額外的塊級標籤,比如空div標籤,設定樣式 2.給浮動標籤的父級元素新增overflow屬性,屬性值設定...

浮動的清除 四種方法

原文 前言 乙個父親不能被自己浮動的兒子,撐出高度。我們本以為這些li,會分為兩排,但是,第二組中的第1個li,去貼靠第一組中的最後乙個li了。第二個div中的li,去貼第乙個div中最後乙個li的邊了。原因就是因為div沒有高度,不能給自己浮動的孩子們,乙個容器。只要浮動在乙個有高度的盒子中,那麼...

清除浮動的四種方法

今天面試 被問了乙個常考的問題 如何清除浮動,本身這個技術沒總結過,加上嘴笨 回答的不怎麼樣,於是簡單的整理一下 1.為什麼清除浮動 總是要清除浮動,為什麼呢,使用浮動之後出現什麼預期之外的顯示效果要清除浮動,總結一下,我認為是為了解決浮動帶來的高度塌陷 2.高度塌陷 先給乙個父元素 只設定寬度,不...