清除浮動的原理詳解

2022-08-05 18:18:14 字數 1607 閱讀 3510

前端佈局用的最多的是float:脫離文件流,浮動起來。浮動的框可以左右移動,直到遇到另一個浮動框或者遇到外邊緣的包含框(bcf)。正是因為當元素浮動之後,不會影響塊級元素的佈局,只會影響內聯元素佈局,會造成父級元素高度坍塌。此時文件流中的普通流就會表現得該浮動框不存在一樣的佈局模式。當包含框的高度小於浮動框的時候,此時就會出現高度塌陷。即為何我們需要清楚浮動。

left

right

div2

left

right

div2

原理:新增一個空div,利用css提高的clear:both清除浮動,讓父級div能自動獲取到高度

優點:簡單,**少,瀏覽器支援好,不容易出現怪問題

缺點:不少初學者不理解原理;如果頁面浮動佈局多,就要增加很多空div,讓人感覺很不爽

建議:不推薦使用,但此方法是以前主要使用的一種清除浮動方法

評分:★★★☆☆

left

right

div2

原理:父級div手動定義height,就解決了父級div無法自動獲取到高度的問題

優點:簡單,**少,容易掌握

缺點:只適合高度固定的佈局,要給出精確的高度,如果高度和父級div不一樣時,會產生問題

建議:不推薦使用,只建議高度固定的佈局時使用

評分:★★☆☆☆

left

right

div2

複製**

原理:必須定義width或zoom:1,同時不能定義height,使用overflow:hidden時,瀏覽器會自動檢查浮動區域的高度

優點:簡單,**少,瀏覽器支援好

缺點:不能和position配合使用,因為超出的尺寸的會被隱藏

建議:只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用

評分:★★★☆☆

left

right

div2

原理:必須定義width或zoom:1,同時不能定義height,使用overflow:auto時,瀏覽器會自動檢查浮動區域的高度

優點:簡單,**少,瀏覽器支援好

缺點:內部寬高超過父級div時,會出現滾動條。

建議:不推薦使用,如果你需要出現滾動條或者確保你的**不會出現滾動條就使用吧。

評分:★★☆☆☆

left

right

div2

原理:所有**一起浮動,就變成了一個整體

優點:沒有優點

缺點:會產生新的浮動問題。

建議:不推薦使用,只作瞭解。

評分:★☆☆☆☆

left

right

div2

left

right

div2

參考:

原文連線:幾種常用的清除浮動方法

css清除浮動的原理

最近學習css發現了高度塌陷時候要清除浮動 為了理解清楚浮動原理 網上找了不少資料 發現都寫的不是很清楚 而且都是一模一樣的內容 我在裡分享...

清除浮動的原理和方法

本文複製自 1 問題的由來 有這樣一種情形 在一個容器 container 中,有兩個浮動的子元素。 在瀏覽器中一執行,就會出現意想不到的結...

解釋下浮動和它的工作原理?清除浮動的技巧

浮動元素脫離文件流,不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。 浮動元素引起的問題和解決辦法? 浮動元素引起的問題 父元素...