Div 中的邊距重疊：原因和解決方案

#header .social {
  margin-top: 50px;
}
#header .contact {
  margin: 20px 70px 20px 0;
}
#header .search {
  margin: 10px 0 0;
}

#header .social { 頂邊距：50px； } #header .contact { 邊距：20px 70px 20px 0； } #header.search{ 邊距：10px 0 0； }

#header .social div 的上邊距為50 像素，但在其下方，#header .contact div 的上邊距為20 像素，而#header .search div 的上邊距為10 像素.

渲染時，這些邊距會折疊，導致較低的邊距被忽略。僅考慮第一個 div 底部和第二個 div 頂部之間的最大邊距。只有當元素共享區塊格式上下文且元素之間沒有內邊距、邊框或行框時，才會出現此行為。
• 為了避免折疊效果，必須確保 div 之間有適當的間距。這可以透過以下方式實現：
• 使用填充代替邊距： 填充充當元素內的內部間距，不影響周圍元素的邊距。
• 新增行框： 在 div 之間插入空白行框（例如
  ）將在區塊格式化上下文中建立中斷，從而防止邊距折疊。

浮動元素：