HTML/CSS - 2列布局，右側頂部利潤影響左側太

Question

這裏是我的簡單加價：

<div style="width:200px"> 
    <div style="width:50%;float:left;"> 
     left side 
    </div> 
    <div style="margin-left:50%;width:50%;margin-top:10px;"> 
     right side 
    </div> 
</div> 

的問題是，邊距：10px的;在右邊也推下了左邊。 我在這裏錯過了什麼？這是預期的嗎？ 我想調整左，右兩側分別頂邊距屬性

Answer 1

有一些事情可以做。正在發生的事情是，正確的div的邊距正在影響包含div的位置，這是推動左邊的div的位置。我相信這是預期的行爲。所有這些都可以工作：

1. 將包含div來float: left
2. 計數器，由要麼設置上包含分區或左側DIV一個-10px餘量行動的權利股利。

Answer 2

嘗試浮動在div包裹的兩列，並在右側的div

Answer 3

這就是所謂的保證金崩潰，而實際發生的事情是，因爲外部div（width:200px）是空的，它需要它的孩子的邊際，並使用它而不是孩子..所以容器被推下10px，並且由於左/右div在它內部，它們也移動。

「表達式崩潰餘量 意味着相鄰（不是 非空內容，填充或邊框 區域或清除它們分開） 兩個或多個框（它可能是下一個 彼此或嵌套）結合到 形成一個單一的餘量。

如果你給它一個邊界，你會看到它的工作如預期.. demo