CSS溢位:用浮動解釋隱藏
問題:溢位屬性如何影響文字相對的位置包含浮動的ul元素?
說明:
預設情況下,像 ul 和 p 這樣的區塊級元素會拉伸到父寬度的 100%。在給定的範例中,ul 僅包含浮動的 li 元素,導致其折疊到 0px 的高度,同時仍保持其完整寬度。
因此,相鄰的 p 元素出現在浮動的右側li 元素,將它們視為普通浮點數。
但是,當overflow:hidden 套用到 ul 時,它會建立一個新的區塊格式化上下文(BFC),它有效地包含ul 中的 li 元素。這可以防止 ul 折疊並強制將 p 元素推到底部,從而清除浮動的 li 元素。
技術細節:
根據 CSS 規範,當正常流中區塊級非替換元素可見溢位時,它們的行為與標準區塊元素相同。但是,將溢出設為任何不可見值(包括隱藏)都會建立 BFC,從而導致不同的行為。
範例:
考慮以下程式碼:
沒有溢位:
沒有溢位:
溢出:
溢出:溢出:溢出:您所見,將如同溢出:隱藏到ul 會強制浮動li 元素包含在ul 中並清除 p元素,將其推到頁面底部。以上是`overflow:hidden` 如何影響 `` 中的浮動元素和後續文字放置?的詳細內容。更多資訊請關注PHP中文網其他相關文章!