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

Question

我有一个非常令人沮丧的边缘情况..我的标记顶部有一个div浮动到右边。

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

我需要在后面的第一段中应用一些样式（背景和边距）。

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

现在我必须使段落“溢出：隐藏”，因此背景不会在浮动的div下扩展，但我有两个奇怪的问题。

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 div的宽度总是200px，只需将.blue div的边距更改为width + 10px即可。像这样：

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

这是一个updated fiddle。