html div模块浮动不了,html – div不会浮动在前面的非浮动div旁边

所以我正在摆弄CSS并且前几天漂浮并偶然发现了一个奇怪的行为(坦率地说,我很惊讶我之前没遇到过).我很困惑它的原因(以及为什么我还不知道……).

如果你有一个div(让我们称他为鲍勃)并且你试图将他漂浮在另一个div(Jimmy)旁边,它只会起作用

>吉米也漂浮了

>吉米来自鲍勃

所以如果我们有：

Main Content 1

Sidebar 1

同

.container {

overflow:hidden; /* this essentially clears the floats. You could remove it and add a clearfloat div instead */

margin-bottom:10px;

}

#one {

background-color:red;

margin-right:50px;

}

#two {

width:50px;

float:right;

background-color:blue;

}

我们得到;

但如果我们只是交换#one和#two,保持相同的CSS：

Sidebar 2

Main Content 2

我们得到：

为什么？我确定它与盒子模型和浮动的定义有关,这很简单(这让我觉得很愚蠢),但是什么？

你可以摆弄它here