為什麼 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>