Html CSS-浮点和背景大小的关系

目前，我正在进行导航，遇到了以下问题：

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

当float:left被移除时，背景色变为可见，但是导航的“形式”被破坏

我很确定我错过了一个重要的点，因为我正试图达到一个简单的点，即形式和背景色都能像我想要的那样得到保留

我的猜测是，浮动内容与运营商的规模（在我的例子中是导航）之间存在关系

---

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

为您的

.group

添加高度

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

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

通过设置高度，可以强制容器下降

或者，您可以将溢出添加到容器

.group

，以强制其查找高度

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

---

将高度添加到

.group

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

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

通过设置高度，可以强制容器下降

或者，您可以将溢出添加到容器

.group

，以强制其查找高度

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

---

将此添加到

.group

：

overflow:auto;

就这样

还有另一个解决方案：添加一个

clear:both所有浮动div之后的元素。但它有点脏：

<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时，总是会发生这种情况。容器不关心浮动元素，因此它就像一个空容器，除非您使用上述解决方案之一。
将此添加到
.group
：

overflow:auto;

就这样

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

<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时，总是会发生这种情况。容器不关心浮动元素，因此它就像一个空容器，除非您使用上述解决方案之一。
在父容器（
.group
）上，添加
溢出：自动
或设置固定高度

这是因为浮动元素和绝对定位元素在默认情况下被排除在文档流之外，因此在定位以下元素时将被忽略。
在父容器上（
.group
），添加
溢出：自动
或设置固定高度

这是因为浮动元素和绝对定位元素在默认情况下被排除在文档流之外，因此在定位以下元素时被忽略。
以下是工作CSS声明

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

您需要了解嵌套元素的浮动和定位。
以下是有效的CSS声明

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

您需要了解嵌套元素的浮动和定位。
只需添加一个明确的二者；对于一个额外的元素：

<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;
}


按钮1
按钮2
按钮3
按钮4
按钮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;
}


按钮1
按钮2
按钮3
按钮4
按钮5

我不能。。它需要是动态的，因为内容将是动态的。为此，添加溢出：隐藏；我不能对内容的大小设置“严格”的定义，因为某些组中会有更多的按钮，并且背景高度会改变。我试着让它达到100%的高度（包括导航高度和团体高度），但并没有达到我预期的效果。有没有办法根据包装器的内容设置包装器div的高度？我不能。。它需要是动态的，因为内容将是动态的。为此，添加溢出：隐藏；我不能对内容的大小设置“严格”的定义，因为某些组中会有更多的按钮，并且背景高度会改变。我试着让它达到100%的高度（包括导航高度和团体高度），但并没有达到我预期的效果。有没有办法根据内容设置包装器div的高度？谢谢！这很有魅力，也感谢你解释为什么会发生这种情况！非常感谢。这很有魅力，也感谢你解释为什么会发生这种情况！