overflow hidden可以清除浮動原因

2021-08-05 23:47:04 字數 324 閱讀 9006

w3c上定義overflow屬性是:

規定當內容溢位元素框時發生的事情。

hidden值:內容會被修剪,並且其餘內容是不可見的。

那為什麼overflow:hidden可以清楚浮動呢?

overflow除了(visible)會建立新的塊級格式(bfc)給他的子元素(在沒有給父元素高度的情況下,給父元素設定overflow: hidden時,就要計算父級塊的全部高度才能確定在什麼位置hidden,這樣子的話,浮動的子元素的高度也要被算進去,因此需要建立新的bfc),從而起到清楚浮動效果。

闡述overflow hidden屬性

overflow hidden這個css樣式是大家常用到的css樣式,但是大多數人對這個樣式的理解僅僅侷限於隱藏溢位,其實他還有清除浮動這個含義。這是乙個常用的div寫法,下面我們來書寫樣式。大家可以在dmx中自己做試驗 wai nei 可以看到,我給nei這個id加了乙個浮動,我們常規的理解是,我...

全面闡述overflow hidden屬性

之前說過這個overflow的各種屬性,其中也包括可這個overflow hidden屬性。之前我也不知道overflow hidden還可以清楚浮動。現在我就把這一部分呢也貼出來大家一起學習下吧。overflow hidden這個css樣式是大家常用到的css樣式,但是大多數人對這個樣式的理解僅僅...

關於overflow hidden的研究

示例頁面原始碼 當外層div設定overflow hidden屬性,內層div設定了float left,如果同時寬度超過外層div,會自動擷取內層div width,以適合外層width.nei wai 另外,我們再做乙個試驗,將wai這個div的高度值刪除後,我們發現,wai的高度自動的被nei...