Question

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

http://jsfiddle.net/sPUjQ/101/ click me

每当我运行两个花车时，背景颜色会停留，但是当我尝试3个花车时，它就会消失！

有人可以告诉我发生了什么以及为什么要这样做？在进行内联块时我不会遇到这种情况，只需浮动：左。

Answer 1

当浮动子div时，父级会崩溃，因为它们已从正常文档流中删除。在父级上添加overflow:auto以恢复您之后的行为：

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

<强> jsFiddle example

Answer 2

您是否尝试在.contains中保留蓝色背景？如果是，那么您必须将float: left移至children of .contains并添加display: inline。

请参阅我的修订code

希望它有所帮助。

Answer 3

尝试以下示例，单独浮动，

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

http://jsfiddle.net/ShamalSandeep/km8twgvf/1/

Answer 4

你应该清除容器div末尾的浮点数，否则它会崩溃。

.clear{
clear:both;
}

http://jsfiddle.net/sPUjQ/105/

您可以在此处详细了解浮动及其怪癖＆gt; http://css-tricks.com/all-about-floats/

div中有太多花车

4 个答案: