CSS - 浮动和背景大小关系答案

【问题标题】：CSS - Float and Background Size RelationCSS - 浮动和背景大小关系
【发布时间】：2013-02-08 20:56:13
【问题描述】：

目前，我正在做一个导航，我遇到了这个问题：

导航的内容向左浮动。当我尝试为导航本身设置背景颜色时，它不起作用。看这个例子：

http://cssdeck.com/labs/qknohqxe

当 float:left 被移除时，背景颜色变得可见，然而，导航的“表单”被破坏了。

我很确定我错过了一个重要的点，因为我正试图达到这个简单的点，即按照我的需要保留表单和背景颜色。

我的猜测是，浮动内容和载体的大小（在我的例子中是#nav）之间存在关系。

需要针对此问题的建议/解决方法。

【问题讨论】：

标签： html css

【解决方案1】：

将此添加到.group：

overflow:auto;

就是这样。

还有另一种解决方案：在所有浮动 div 之后添加一个clear:both; 元素。但是有点脏：

<div class="container">
    <div class="floating div"></div>
    <div class="floating div"></div>
    <div class="floating div"></div>
    <div style="clear:both;"></div>
</div>

当您使用浮动 div 时，总是会发生这种情况。容器不关心浮动元素，因此它就像一个空容器，除非您使用上述解决方案之一。

【讨论】：

【解决方案2】：

在父容器（在您的情况下为.group）上，添加overflow: auto 或设置固定高度。

发生这种情况是因为浮动元素和绝对定位元素默认情况下会从文档流中排除，因此在定位以下元素时会被忽略。

【讨论】：

谢谢！这就像魅力一样，也感谢您解释为什么会发生这种情况！

【解决方案3】：

为您的.group 添加高度。

.group{
    height: 300px;
    background-color: blue;
}

当您浮动对象时，它会将其从文档流中取出。这意味着父对象与子元素的高度无关。

通过设置高度，您会强制容器下降。

或者，您可以将溢出添加到容器.group 以强制它查找高度。

.group{
    overflow: hidden;
    background-color: blue;
}

【讨论】：

我不能......它需要是动态的，因为内容将是动态的
这样做，添加溢出：隐藏；到组。
我不能将“严格”定义设置为内容的大小，因为某些组将有更多按钮，并且背景高度会改变。我已经尝试将其设置为 100% 高度（导航和组），但它没有像我预期的那样工作。有没有办法根据它的内容设置包装器div的高度？

【解决方案4】：

这是有效的 CSS 声明。

.group{
    background-color: blue;
    float: left;
    width: 200px;
}

您需要了解嵌套元素的浮动和定位。

【讨论】：

【解决方案5】：

只需添加一个清除两者；到一个额外的元素：

<div id="nav">
    <div class="group">
        <div class="button">Button1</div>
        <div class="button">Button2</div>
        <div class="button small">Button3</div>
        <div class="button small">Button4</div>
        <div class="button">Button5</div>   
        <br class="clear" />
    </div>
</div>


#nav{
    width: 240px;
}

.button{
    float:left;
    border-radius: 20px;
    width: 200px;
    height: 50px;
    margin-top: 10px;
    background-color: red;
    text-align: center;
    line-height: 50px;
}

.group{
    background-color: blue;
}

.small{
    width: 100px;
}
.clear
{
    clear: both;
}

【讨论】：