段落边缘影响它旁边的浮动块

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。