所以我正在摆弄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