Html div中的浮动太多

所以我试图在一个div中运行3个float，我遇到了这个问题

单击我

每当我运行两个浮动时，背景色保持不变，但当我尝试3个浮动时，背景色就消失了

---

有人能告诉我发生了什么，为什么会这样吗？我在执行内联块时不会遇到这种情况，只需浮动：左。

浮动子div时，父div会折叠，因为它们已从正常文档流中删除。在父项上添加

overflow:auto

，以恢复您所追求的行为：

.contain {
    display: block;
    background: blue;
    margin: 0 auto;
    overflow:auto;
}

---

您是否试图在两个

包含的
中保留蓝色背景？如果是，则必须将.contains的
子项
中的
float:left
删除，并添加
display:inline

看我的复习

希望有帮助。
试试下面的例子，
分别浮动

.contain{width: 100%; background: blue; margin: 0 auto;}
.one, .four{float: left; background: red;}
.two, .five{float: left; background: orange;}
.three, .six{float: left; background: yellow;}

您应该清除容器div末尾的浮动，否则它将崩溃

.clear{
clear:both;
}


您可以在此处阅读有关浮动及其怪癖的更多详细信息>
，或者只需将您的浮动更改为显示：内联块就可以了！！！。你是否碰巧有一个链接来解释关于这种行为的更多细节？关于为什么会发生这种情况没有任何意义。好吧，为了深入了解浮动，请看，我试图保留蓝色。试图理解它消失的原因。我知道如何为内联做这件事，只是感到困惑，因为float和inline在视觉上工作相同，但行为不同。谢谢你，我只是想让他们并排走。