不同高度的浮動元素：避免同級位移
浮動元素提供了一種方便的水平對齊內容的方法。但是，當這些元素具有不同的高度時，可能會導致意外的佈局問題。在這種情況下，較高的元素可能會阻礙後續兄弟元素的正確對齊。
為了解決這個問題，CSS 提供了多種技術。其中一種方法利用 nth-of-type() 選擇器根據特定元素在序列中的位置來識別特定元素。在本例中，我們可以利用 :nth-of-type(3n 1) 規則將特定樣式套用於每第三組浮動元素的第一個元素。
透過新增此CSS 屬性，我們定義了每第三個浮動元素應清除先前的浮動，確保第二行與第一行對齊：
figure:nth-of-type(3n+1) {
clear:left;
}此技術有效地重置指定元素的浮動行為，允許它們開始新的一行，從而解決重疊問題。
要說明這一點，請造訪更新的 JSFiddle 範例：[](https://jsfiddle.net/KatieK/5Upbt/)。
以上是如何防止高度不同的浮動元素重疊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
