「overflow:hidden」如何影響浮動元素和後續內容？

CSS 溢位：用浮點隱藏

了解Overflow 屬性的影響

CSS 中的Overflow超出其包含元素邊界的內容。當套用於具有浮動子元素的元素時，它會建立一個新的區塊格式化上下文。

對文字放置的影響

考慮以下程式碼片段：

預設情況下，出現在ul 之後的段落(p)元素將被推到底部，因為ul 是塊級元素。但是，當 ul 上的溢位設定為隱藏時，會發生以下情況：

• ul 建立一個區塊格式化上下文，包含其浮動子元素（lis）。
• ul「重新出現」並且不再折疊到 0px 的高度。
• 段落 (p) 被推到末尾ul 的內容，出現在浮動元素之後。

這是因為 Overflow:hidden 創造了一個新的格式化環境，其中 ul 充當區塊級元素，包含其子元素。

技術解釋

根據CSS規範：

• 當溢出「可見」時：「非替換的區塊級元素不會建立新的區塊格式化上下文，無論其浮動屬性為何。 ([§10.6.3](https://www.w3.org/TR/CSS2/visudet.html#block-level))
• 當溢位設定為不可見時' value: "區塊格式化上下文由任何子樹的根元素建立，其根元素是內聯級或原子內聯級元素的子列表的根，該元素是浮動、絕對定位或具有“可見”以外的“溢出” 。 Overflow:hidden 會建立一個新的封鎖格式化上下文，使其包含其子元素並將段落推到底部。

以上是「overflow:hidden」如何影響浮動元素和後續內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！