div不会漂浮在前面的非浮动div旁边

所以我在摆弄CSS和前几天浮动，偶然发现了一个奇怪的行为（坦率地说，我很惊讶，我以前没有遇到过）。我对它的原因感到困惑（以及为什么我不知道......）。div不会漂浮在前面的非浮动div旁边

如果你有一个div（让我们称他为鲍勃），并尝试下一个浮动他到另一个DIV（吉米），它如果

吉米浮动太
吉米·鲍勃后谈到只能

因此，如果我们有：

<div class="container"> 
    <div id="one">Main Content 1</div> 
    <div id="two">Sidebar 1</div> 
</div>

与

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

我们得到; enter image description here 但如果我们只是交换#one和#two，保持相同的CSS：

<div class="container"> 
    <div id="two">Sidebar 2</div> 
    <div id="one">Main Content 2</div> 
</div>

我们得到： enter image description here

为什么？我相信这是一个简单的东西（这让我感到很蠢）与盒子模型和float的定义有关，但是什么？

你可以用它here

来源

2011-07-09 Thomas Shields

这是预期行为拨弄。

首先记住浮动元素不是正常流程的一部分。其余的是在以下规格：

一个浮动框被移动到左边或右边，直到它的外边缘接触包含块边缘或另一浮体的外边缘。如果有一个线框，浮动的框的外顶部与当前线框的顶部对齐当前线框。

基本上你的第二个例子拉动div#two出该文档流和直到它触及其兄弟，div#one的外缘它向右移动。由于它有margin: 50px;，因此div#two有足够的空间适合。

你的第一示例中，div#one早已清零该线作为一个块级元素，因此div#two浮起右和与电流线的顶部对齐。

从W3C CSS2.1 Specification on Floats

来源

2011-07-09 23:32:37

编辑最好解释它。 –

重新分配由于编辑而接受的答案并不酷，朋友。 – AlienWebguy

@AlienWebguy，我的编辑实际上只是添加了第一个例子的解释。原始答案解释了为什么第二个例子有效，这是主要问题。公平地说，我也是第一个答案。尽管如此，+1。 –

更多如果您删除margin-right:50px;应该更有意义，你:)

通过定义一个块元素占用父容器的整个宽度。即使您给它一个定义的宽度，这只是计算宽度的直观表示，并不会影响框模型。

浮动元素的确如此，但它漂浮在父元素的第一个可用浮动空间中。在示例一中，它位于第一个块元素下面。在例子二中，它位于顶部。

如果你想实现例如2的结果实例1中，只需添加float:left;到#one。

来源

2011-07-09 23:32:58 AlienWebguy

哦，*杜哈* - 我想我会设立一种心理障碍，不知道这一点，哈哈。谢谢。 –

+1“根据定义，块元素占用父容器的全部宽度，即使给定了一个宽度” – Philip007

div不会漂浮在前面的非浮动div旁边

回答

相关问题