為什麼浮動後元素的上邊距有時會消失？

浮動後 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>