Question

我有这段简单的代码：

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

我看到旁边的红色方形和蓝色。

但是，如果我添加“width：100px;”这一行在#blue中，一切都毁了： “ABC”跳“向下一行，没有蓝色背景。 WHY ??

Answer 1

因为另一个div漂浮在它的上方。当你浮动一些东西时，任何未浮动的元素都将使其外部边界成为浮动元素的BEHIND。因此，蓝色框实际上位于红色框之后..但因为红色是块级元素，文本不适合那里，因此它位于红色下面。漂浮两者，它会工作

http://jsfiddle.net/AUZxY/

Answer 2

尝试将两个元素浮动到左侧，我相信我放在一起的this Fiddle应该是您正在寻找的。

我的DIV元素发生了什么？

2 个答案: