浮動混亂。爲什麼設置第二個元素的寬度會影響浮動？

Question

我有這樣的HTML：

<div class = "block1">hi</div> 
<div class = "block2">hi</div> 

而在一個情況下，我有這樣的CSS：

.block1 { 
    width:100px; 
    border:1px solid; 
    float: left; 
} 

.block2 { 
    width:100px; 
    border:1px solid; 
} 

這使得這個：

Jsfiddle

而第二種情況，我有此CSS：

.block1 { 
    width:100px; 
    border:1px solid; 
    float: left; 
} 

.block2 { 
    border:1px solid; 
} 

這使得這個：

Jsfiddle

爲什麼設置一個寬度使得不屬第二個div並排的第一個div？如果我想要第二個div並排並具有100像素，該怎麼辦？如果我設置float：left;它是這樣做的，但爲什麼？

Answer 1

因爲如果你指定一個寬度你的第二個div你需要使用float: left;它，因爲div是一個塊級元素，如果你不指定寬度，它會佔用的可用空間的休息，如果您定義的寬度，它會浮除了其他浮動DIV如果有可用空間，序浮動是正確的，你需要使用float: right

Demo

編輯：更好地瞭解...

如果你沒有定義寬度

------------------------------------------ 
       total space      Legend (/ - empty space) 

------------- Example 1 ---------------- 
div1(floated left) /////////////////////// 
        ^---------------------^ 
        This space will be taken 
       by the div which is without width 
------------- Example 2 ---------------- 
div1(floated left) 
div2(same size as 1 wont float unless you give float: left;) 

------------- Example 3 ---------------- 
div1(floated left) div2(besides div 1 if widths are different without giving float left) 
------------------------------------------ 

至於你，如果你指定寬度應該浮到左邊，它ONT因爲你是給寬度相同的div2什麼你給div1Reference，所以如果你改變說150px的第二個div它會說：工作... Demo

但是，如果你清楚你的浮動浮動第二個div纔不會讓股利浮動除其他1，請參閱本example

Answer 2

浮動是一個CSS定位屬性。

在第一個塊中，您定義了浮動左側但未關閉浮動。對於需要使用clear:both;

看到更新後的結果：

DifferenceBetweenFloatLeftAndRight

jsFiddleWithClearingFloat