为什么 CSS 中的浮动元素后我的上边距会被忽略？

浮动元素后忽略上边距：了解 CSS 流程

尽管仔细定义了 div 的上边距，但您可能会遇到在以下情况下忽略边距的情况：前面的 div 是浮动的。此行为源于 CSS 规范，该规范规定浮动元素被视为正常流程之外。因此，在浮动元素之前或之后创建的非定位块元素的行为就像浮动元素不存在一样。

示例代码

考虑以下 HTML 代码：

<div> <p>在此示例中，第二个 div 的 margin-top 为 90px。然而，在 Firefox 和 IE8 中，第二个 div 似乎与第一个 div 接触，而没有明显的上边距。</p>
<h3 id="解决方案-创建包装器">解决方案：创建包装器</h3>
<p>要解决此问题，有一个简单有效的方法解决方案是将第二个 div 包装在另一个 div 中：</p>
<pre class="brush:php;toolbar:false"><div>
<p>在此修改后的代码中，包装器 div 的 padding-top 属性定义了空间包装器及其内容之间。重要的是，此填充是在内部应用的，这意味着它不会影响任何外部元素，例如浮动的 div。结果，尽管浮动 div 干扰了正常流程，但第二个 div 现在已与浮动 div 正确分离。</p>
<h3 id="结论">结论</h3>
<p>掌握 CSS 流程和浮动元素的影响是在布局设计中至关重要。通过理解这些概念并采用适当的解决方案（例如使用内部填充包裹元素），即使存在浮动元素，您也可以确保网页按预期显示。</p>
</div>