CSS margin-top 導致父元素塌陷：BFC 與 margin 塌陷原理解析

現象

子元素設定 `margin-top`，父元素跟著向下移動，而非子元素在父元素內向下移動。

原因：Margin Collapse (外邊距合併/塌陷)

當**父子元素垂直外邊距相鄰**、且父元素**沒有 BFC (塊級格式化上下文) 觸發條件**時，子元素的 `margin-top` 會「傳遞」給父元素，導致父元素產生相同外邊距。

觸發 BFC 的常見方式 (任一即可)

推薦修正

.parent {
    /* 方案一：最輕量 */
    padding-top: 1px;           /* 或 border-top: 1px solid transparent */
    /* 方案二：現代佈局 */
    display: flow-root;         /* 專門建立 BFC，無副作用 (現代瀏覽器支援) */
    /* 方案三：Flex */
    display: flex; flex-direction: column;
}

深度解析參考

張鑫旭博客詳細圖解：https://www.cnblogs.com/hejia/archive/2013/05/26/3099697.html