Floating Elements and CSS Background Color

In web development, styling elements with CSS can be a challenge when encountering scenarios involving floating elements.當使用“ float”屬性從文檔的正常流中刪除元素時，可能會出現這一點，從而導致父元素尺寸和背景顏色的問題。

考慮以下簡化的方案，其中兩個divs，“左”和“右”，``左'''和'右，'the parent'content'content'div中。我們為每個div分配了一個背景顏色：for parent的紅色，綠色和黃色為浮動元素。 寬度：960px; 身高：自動； 保證金：0自動； 背景：紅色； 清晰：兩者; } 。左邊 { 浮子：左； 身高：300px; 背景：綠色； } 。正確的 { 浮點：對； 背景：黃色； }

要糾正此問題，我們必須解決元素漂浮時發生的行為變化。通過設計，它們從正常文檔流中刪除，基本上位於父母的邊界之外。因此，父無法確定其尺寸，導致崩潰。

該解決方案在於指示父母通過強迫他們包含他們來考慮其漂浮的孩子。這可以通過將“溢出”屬性添加到父元素來實現。 “溢出”的允許值包括“隱藏”和“自動”：

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

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

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

在我們的示例中將任一值應用於'content'div的任何一個值都將糾正崩潰的問題，從而允許父根據其內容大小擴展，從而揭露整個紅色背景。 溢出：隱藏； ... } [&& && && &&& && &&華