段落邊緣影響它旁邊的浮動塊

Question

我有一個非常令人沮喪的情況與邊距..我有一個div在我的標記漂浮在右邊的頂部。

.grey{ 
    float:right; 
    width:200px; 
} 

我需要將一些樣式（背景和邊距）應用於第一段後。

.blue{ 
    background-color: blue; 
    margin: 10px; 
    overflow:hidden; 
} 

現在我必須作出段落「溢出：隱藏」，這樣的背景不浮動的DIV下方延伸，但我有2個奇怪的問題。

1. 保證金似乎並不適用於接觸浮動的段落一側;

2. 幅度似乎適用於它旁邊的浮動元素..

這裏有一個小提琴。 http://jsfiddle.net/whiteatom/Nkfzg/6/

誰能告訴我如何獲得「藍色」元素和浮動之間的空白空間？誰能告訴我如何讓我的浮動元素沒有這些幻影邊距？

乾杯，

whiteatom

Answer 1

你需要一個左邊距，以便從該段適用於浮動元素空間它扔掉：

.grey { 
    float: right; 
    width: 200px; 
    margin-left: 10px; 
} 

如前所述，邊緣塌陷使你的段落的上邊距影響頁面的身體，而不是。這會導致它將段落和浮動元素向下推。

從浮動元素中刪除上邊距，你有兩個選擇（只選一項）：

body { 
    float: left; 
} 

這將導致保證金：

• 浮體取消保證金崩潰隻影響該段落。 Updated fiddle

• 施加負上邊距您浮動元素：

  .grey { 
      float: right; 
      width: 200px; 
      margin-left: 10px; 
      margin-top: -10px; 
  } 
  

  在這裏，你移浮動元素最多對抗保證金崩潰，它仍然有效。Updated fiddle

Answer 2

如果.grey格總是將是200像素寬，只是改變了.blue div的保證金是width + 10px。像這樣：

.blue { 
    border: 1px solid red; 
    background-color: blue; 
    margin: 10px 210px 10px 10px; 
}; 

這是updated fiddle。