為什麼我的浮動元素沒有正確對齊？

CSS 浮動行為的期望與現實

在 CSS 中，浮動屬性通常用於水平對齊元素。但是，將其與其他元素一起使用時可能會出現意外行為。

問題

以下範例說明了一個常見的誤解：

<code class="html"><div class="inline">
    first line<br>
    second line<br>
    third line<br>
</div>

<div class="yellow">floated div</div></code>

<code class="css">.inline {
    float:left;
}

.yellow {
    background-color:yellow;
}</code>

在此範例中，您可能希望第二範例個div（具有黃色背景）與第一個div 的右側對齊。然而，如現場範例所示，它仍然佔據其容器的整個寬度。

理解行為

這種行為其實是浮動定位的預期結果。當元素浮動時，後續內容會從該元素的右側向下流動。但是，包含區塊的寬度（由以下元素設定）仍然保留。

根據 CSS 規範，區塊級元素（例如 div 和 p）未定位忽略浮動。另一方面，線框沿著浮動的一側流動，但它們的寬度縮短了。

解

要達到預期的結果，其中第二個div正確對齊後，您可以新增一個溢位屬性，其值對第二個div 不可見。這可以防止它與浮動元素重疊，如 CSS level 2.1 規範中所指定的。

範例

<code class="css">.yellow {
    overflow: hidden;
}</code>

新增此內容後，第二個 div 將不再延伸到浮動元素之外，建立所需的對齊方式。

重疊的目的

重疊在後續內容足夠長以繼續超出浮動元素的情況下非常有用。如果預設限制重疊，則內容將不會在浮動元素下繼續，從而產生意想不到的結果。

以上是為什麼我的浮動元素沒有正確對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！