為什麼在 CSS 中使用浮動元素時我的父容器不顯示其背景顏色？

CSS 中的背景顏色和浮動元素

使用CSS 時，您可能會遇到浮動元素阻止父容器顯示的情況它的背景顏色。出現此問題的原因是浮動元素從文件流中刪除，導致父元素遺失其定義的尺寸。

作為範例，請考慮以下HTML 結構：

<div class="content">
    <div class="left">
        <p>some content</p>
    </div>
    <div class="right">
        <p>some content</p>
    </div>
</div>

使用以下內容樣式：

.content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
 }

.left {
     float: left;
     height: 300px;
     background: green;
 }

.right {
     float: right;
     background: yellow;
 }

在這種情況下，向「右側」浮動元素新增內容不會導致父div 垂直展開，露出紅色背景。

要解決此問題，您可以在父元素上使用溢位屬性。將overflow設為hidden或auto會強制父級包含其子級，從而使背景顏色能夠正確顯示。

這是一個使用overflow: hide的範例：

.content {
    overflow:hidden;
}

透過強制父元素包含其子元素，紅色背景現在可見，即使存在浮動元素。

以上是為什麼在 CSS 中使用浮動元素時我的父容器不顯示其背景顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！