浮动元素有上边距

Question

我已经提出了一个正确的元素,由于某种原因,它有一个优势.我不知道它来自哪里.

HTML:

<p>...</p>
<p class="foo">...</p>
<p>...</p>
<p>...</p>

CSS:

p.foo { 
  width: 500px;
  float: right;
}

图片:

codepen.io:http://codepen.io/vbelenky/pen/oEmHt

Answer 1

所有段落都有一个默认的边距:p { margin: 1em 0; }浮动的段落没有区别.

1. 如果您在浏览器中测量2个段落之间的边距,您将看到它不是2em(1em + 1em),而只是总共1em.
2. 这个浮动段落与其他段落不同,但具有相同的默认边距.

为什么1.？(垂直)边距据说是崩溃的(CSS2.1折叠边距).显示文本时这是非常自然的(主要是HTML/CSS是关于文本的),在处理其他类型的内容时不太自然,但浏览器无法知道这类事情......

在CSS中,两个或多个框(可能是也可能不是兄弟)的相邻边距可以组合形成单个边距.据说以这种方式组合的边距会崩溃,因此产生的合并边距称为折叠边距.
(...)
水平边距永不崩溃.

为什么2.？不同之处在于浮动元素的垂直边距不会折叠(与上面相同的链接,请参见绿色的第二个注释)

浮动框和任何其他框之间的边距不会崩溃

解决方案非常明显:当涉及垂直边距时,必须以与文档正常流程中不同的方式处理浮动元素(至少必须考虑是否必须修改值).这里.foo { margin-top: 0 }或.foo { margin: 0 }(取决于您想要在此浮动段落底部的边距)