css - 影响旁边 float block 的段落边距

Question

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

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

我需要对之后的第一段应用一些样式(背景和边距)。

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

现在我必须让段落“溢出:隐藏”这样背景就不会延伸到 float 的 div 下，但我有 2 个奇怪的问题。

1. 边距似乎不适用于段落中接触 float 的一侧；

2. 边距似乎适用于它旁边的 float 元素..

这是一个 fiddle 。 http://jsfiddle.net/whiteatom/Nkfzg/6/

谁能告诉我如何获得“蓝色”元素和 float 元素之间的边距空间？谁能告诉我如何让我的 float 元素没有这些幻象边距？

干杯，

白原子

Answer 1

您需要为 float 元素应用左边距，以便将其与段落隔开:

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

如前所述，边距折叠会导致段落的上边距影响页面主体。这导致它将段落和 float 元素都向下推。

要移除 float 元素的上边距，您有两种选择(只能选择一种):

• 通过 float body 取消 margin collapse:

  body {
      float: left;
  }
  

  这会导致边距只影响段落。 Updated fiddle

• 为您的 float 元素应用负的上边距:

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

  在这里，您将 float 元素向上移动以抵消边距折叠，它仍然有效。 Updated fiddle