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的任何一个值都将纠正崩溃的问题，从而允许父根据其内容大小扩展，从而揭露整个红色背景。 溢出：隐藏； ... } [&& && && &&& && &&华