我有一段简单的代码：
.HTML：
<body>
<div id="red"> ABC </div>
<div id="blue"> ABC </div>
</body>
.CSS：
body{
width: 300px;
}
#red{
float:left;
width: 100px;
height: 100px;
background-color: red;
}
#blue{
height: 100px;
background-color: blue;
}
我看到红色的方块和蓝色的方块就在它旁边。
但是，如果我在 #blue 中添加"width： 100px;"行，一切都被毁了："ABC"向下跳一行，没有蓝色背景。为什么？？
因为另一个div漂浮在它上面。当您浮动某些内容时，任何未浮动的元素都将在浮动元素后面具有其外部边界。因此，蓝色盒子实际上在红色盒子后面。但是因为红色是块级元素，所以文本不适合那里，所以它位于红色下面。浮动两者，它将起作用
http://jsfiddle.net/AUZxY/
尝试将两个元素都向左浮动，我相信我放在一起的这个小提琴应该是你要找的。