css - 影响旁边浮动块的段落边距

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/

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

干杯，

白原子

Answer 1

您需要对浮动元素应用左边距以使其远离段落：

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

如前所述，边距折叠会导致段落的上边距影响页面正文。这会导致它向下推动段落和浮动元素。

要从浮动元素中删除上边距，您有两种选择（仅选择一种）：

• 通过浮动主体取消边距折叠：

  body {
      float: left;
  }
  

  这会导致边距仅影响段落。更新的小提琴

• 对浮动元素应用负上边距：

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

  在这里，您将浮动元素向上移动以对抗仍然有效的边距塌陷。更新的小提琴

Answer 2

如果.greydiv 总是 200px 宽，只需将.bluediv 的边距更改为width + 10px. 像这样：

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

这是一个更新的小提琴。