清除浮動的四種方式

2022-09-30 16:15:14 字數 1464 閱讀 8567

父元素不寫高度時，子元素寫了浮動之後，父元素會發生高度塌陷

示例**:

html**:

left浮動


right浮動
css**：

.box


.box-l,.box-r


.box-l


.box-r
效果:

給父級盒子設定高度，缺點 : ( 前提需要能確定內容高度才能設定 )

css**：

.box


.box-l,.box-r


.box-l


.box-r
效果:

在浮動元素下方新增空的塊級元素，並給該元素新增樣式:

html**:

left浮動


right浮動
css**:

.box


.box-l,.box-r


.box-l


.box-r


.clear
效果:

缺點: 在結構裡增加了空的標籤，不利於**的可讀性，且降低了瀏覽器的效能

實現原理：因為overflow:hidden屬性相當於是讓父級緊貼內容，這樣即可緊貼其物件內內容（包括使用float的div盒子），從而實現了清除浮動。

缺點 : 會隱藏溢位的元素

html**不變：

css**如下：

.box


.box-l,.box-r


.box-l


.box-r
效果:

萬能清除浮動(推薦)

原理：通過在樣式表中建立統一樣式，然後進行呼叫即可

選擇符::after
css**：

html**：

left浮動


right浮動
效果圖:

清除浮動的四種方式

方法一 定高法 強行給父元素新增乙個高度 弊端 後期不好維護 方法二 額外標籤法 在浮動元素最後面新增乙個塊級元素 給這個塊級元素新增乙個clear both就可以解決這個問題 弊端 每一次清除浮動都需要新增乙個額外標籤 father son div clear both div div 方法三 偽...

四種方式進行清除浮動

以下展示了四種方式進行清除浮動先看一段 css box fl html div div div div 下面是結果因為沒有清除浮動，所以子元素沒有將父元素撐開，出現上面的情況。下面是幾種清除浮動的方法1.額外標籤法 css box fl clearfix html div div div div d...

清除浮動的四種方式及其原理

浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。父元素的高度無法被撐開，影響與父元素同級的元素 與浮動元素同級的非浮動元素會跟隨其後 若非第乙個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構 clearfix style class f left d...