为什么浮动后元素的上边距有时会消失？

浮动后 HTML 元素的上边距被忽略

在 Web 开发中，通常使用浮动来将元素彼此并排放置。但是，当存在浮动元素时，在某些浏览器中可以忽略后续元素的上边距。

此行为源于以下事实：浮动元素从文档的正常流程中删除，导致后续阻塞-level 元素流动，就好像浮动不存在一样。这可能会导致第二个元素在视觉上与第一个元素相邻，尽管有指定的上边距。

考虑以下示例：

<div>
<p>在这种情况下，需要第二个 div与第一个分隔开 90px 上边距。然而，在 Firefox 或 IE8 中，第二个 div 似乎与第一个 div 接触。</p>
<p><strong>解决方案：用内部空白包裹</strong></p>
<p>要纠正此问题，一个常见的方法解决方案是将第二个 div 包装在另一个元素中。该包装元素将充当第二个 div 和浮动元素之间的缓冲区。此外，包装器的空白应使用填充而不是边距来指定。这有助于确保填充不受外部元素的影响。</p>
<p>这是示例的修改版本：</p>
<pre class="brush:php;toolbar:false"><div><p>通过此修改，包装器元素在顶部建立 90 像素的填充，按预期有效地将第二个 div 与浮动元素分开。</p></div>