div内浮动太多

Question

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

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

每当我运行两个花车的背景颜色停留，但是当我尝试3辆花车然后就不见了！

有人可以告诉我发生了什么，为什么这样做？在做内联块时我不会遇到这种情况，只是float：left。

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/

你可以阅读更多详细介绍一下这里花车和他们的怪癖>http://css-tricks.com/all-about-floats/