為什麼 HTML 中浮動元素後的頂部邊距不起作用？

為什麼在浮動元素之後忽略 HTML 元素的上邊距？

在 CSS 中，浮動元素會從文件的正常流程中刪除，從而允許其他元素包圍它。但是，當嘗試對浮動後的元素套用上邊距時，此行為可能會導致意外結果。

根據CSS 規範，「由於浮動不在流中，因此未定位的塊框在浮動框之前和之後創建的內容垂直流動，就好像浮動不存在一樣。」因此，瀏覽器計算中基本上會忽略後續元素的上邊距。

要修正此問題，常見的方法是將後續元素包裝在容器中，並將 padding 應用於包裝器而不是 margin到元素。這有效地創建了獨立於外部元素的內部空白，從而使上邊距能夠按預期工作。

範例：

在下面的範例HTML 程式碼中，浮動

<div>;防止後續<div> 的邊距生效：

<div>

要解決這個問題，我們可以將後續的

<div> 包裝起來。在包裝器中，​​並將填充應用於包裝器：

<div>

透過利用這種技術，我們有效地在浮動元素和後續元素之間創建一個“緩衝區”，確保適當地應用上邊距，並且強制執行。