为什么 HTML 中浮动元素后的顶部边距不起作用？

为什么在浮动元素之后忽略 HTML 元素的上边距？

在 CSS 中，浮动元素会从文档的正常流程中删除，从而允许其他元素包围它。但是，当尝试对浮动后的元素应用上边距时，此行为可能会导致意外结果。

根据 CSS 规范，“由于浮动不在流中，因此未定位的块框在浮动框之前和之后创建的内容垂直流动，就好像浮动不存在一样。”因此，浏览器计算中基本上会忽略后续元素的上边距。

要纠正此问题，常见的方法是将后续元素包装在容器中，并将 padding 应用于包装器而不是 margin到元素。这有效地创建了独立于外部元素的内部空白，从而使上边距能够按预期工作。

示例：

在下面的示例 HTML 代码中，浮动

<div>;防止后续 <div> 的边距生效：

<div>

要解决这个问题，我们可以将后续的

<div> 包装起来。在包装器中，并将填充应用于包装器：

<div>

通过利用这种技术，我们有效地在浮动元素和后续元素之间创建一个“缓冲区”，确保适当地应用上边距，并且强制执行。