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旁邊

回答

相關問題