如何修復因不同高度的浮動元素而損壞的佈局？

不同高度的浮動元素會破壞佈局

使用可變高度的浮動元素時，保持乾淨的佈局可能是一個挑戰。其中一種情況是，當某些元素比其他元素更高時，導致後續同級元素偏離對齊。

為了解決這個問題，CSS 提供了一個巧妙的解決方案：

CSS 規則對齊浮動元素

figure:nth-of-type(3n+1) {
    clear: left;
}

此規則指示瀏覽器清除浮動elements 每三個元素，從第一個元素開始。換句話說：

• 在第一個、第四個和第七個元素之後，浮動被清除，允許後續兄弟開始新的一行。
• 這確保了第二行元素直接在前三個元素下方對齊，無論它們如何

範例

考慮提供的HTML 與CSS：

<figure> // Figure 1
    ...
</figure>
<figure> // Figure 2
    ...
</figure>
<figure> // Figure 3
    ...
</figure>
<figure> // Figure 4
    ...
</figure>
<figure> // Figure 5
    ...
</figure>
<figure> // Figure 6
    ...
</figure>

figure {
    width: 30%;
    float: left;
    ...
}

透過加入clear: left規則:

figure:nth-of-type(3n+1) {
    clear: left;
}

佈局已修正，第二行數字在前三行下方對齊：

[影像：修正版面配置，第二行數字在前三行下方對齊]

結論

利用清晰：左規則提供了一種優雅而有效的方式來確保不同高度的浮動元素正確對齊，從而保持乾淨且有組織的佈局。

以上是如何修復因不同高度的浮動元素而損壞的佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！