Question

使用MDN's Introduction to CSS layout中的这个示例，CSS float为P和H2元素添加了边距。这是代码示例：

<h1>2 column layout example</h1>
<div>
  <h2>First column</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
</div>

<div>
  <h2>Second column</h2>
  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut.</p>
</div>

这就是CSS（我添加了背景色以便于查看）：

div:nth-of-type(1) {
  background-color: blue;
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  background-color: red;
  width: 48%;
  float: right;
}

如果使用完全相同的代码减去浮点数，则H2元素上没有上边距，P元素上没有下边距。彩色DIV紧紧围绕着文字。

但是，如果你确实包含了浮点数，那么DIV的布局不仅会发生变化（从堆叠到并排，如预期的那样），而且还会向H2元素添加上边距，下边距为添加到P元素。你可以清楚地看到彩色DIV不再在顶部和底部紧紧围绕文本。

我可以通过以下方式轻松删除这些边距：

h2 {
  margin-top: 0;
}

p {
  margin-bottom: 0;
}

它很容易修复，但我的问题是，为什么？为什么添加浮点会导致自动将不需要的边距插入子元素？这种行为是期望还是期望？这是一个错误吗？一项功能？这对我来说似乎有些奇怪和不可预测。

Answer 1

默认情况下，margin-top和margin-bottom标记上的浏览器会设置一些h2和p，根据MDN - Mastering margin collapsing

相邻兄弟姐妹的边缘被折叠（除非后面的兄弟姐妹需要通过花车清除）。

...

如果没有边框，则填充...折叠的边距最终位于父级之外。

...

浮动和绝对定位元素的边距永不崩溃。

Answer 2

在白色CSS之前，您可以重置所有默认浏览器样式。使用一些CSS reseters或

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

Answer 3

这与浮点数无关，只是简单地使用浏览器默认样式，以及元素顶部和底部的“折叠边距”。如果您打开Firefox浏览器开发人员工具，则会出现一个标签为“计算”的标签（或类似的，不确定确切的英语表达式），其中包含一个复选框“brwoser styles”。检查时，在检查HTML元素时会看到浏览器的默认样式。

为什么CSS浮点数会为子元素添加边距？

3 个答案: