一、什么是高度坍塌？

高度坍塌（Collapsing Margins）是指當父元素沒有設置邊框（border）、內邊距（padding）、內容（content）或清除浮動時，其子元素的 margin 會"溢出"到父元素外面，導致父元素的高度計算不包含子元素的 margin，看起來像是父元素"坍塌"了。

二、高度坍塌的常見場景

1. 父子元素?margin 傳遞：

<div class="parent"><div class="child"></div>
</div>.parent {background: #f00;}.child {margin-top: 50px;height: 100px;width:200px;background: #0f0;}

效果：

? ?此時父元素的背景只覆蓋了子元素的 height 部分，margin-top 部分沒有覆蓋

2. 相鄰元素的 margin 合并：

<div class="box1"></div><div class="box2"></div>.box1 {margin-bottom: 30px;}.box2 {margin-top: 20px;}

??實際間距是 30px（取較大值），而不是 50px

三、解決高度坍塌的 7 種方法

1. 使用邊框（border）或內邊距（padding）

.parent {border: 1px solid transparent; /* 透明邊框 *//* 或 */padding: 1px; /* 最小內邊距 */
}

2. 觸發 BFC（塊級格式化上下文）

.parent {overflow: hidden; /* 最常用 *//* 或 */display: flow-root; /* 專門用于創建BFC *//* 或 */float: left/right;/* 或 */position: absolute/fixed;/* 或 */display: inline-block;
}

3. 使用偽元素清除浮動（clearfix）

.parent::after {content: "";display: table;clear: both;
}

4. 使用 flex 或 grid 布局

.parent {display: flex; /* 或 grid */
}

5. 給父元素設置最小高度

.parent {min-height: 1px;
}

6. 使用隔離屬性（isolation）

.parent {isolation: isolate;
}

tip:實際應用建議

1. 現代布局：優先使用 flex 或 grid 布局，它們天然避免了許多傳統布局問題
2. 通用解決方：`display: flow-root` 是最語義化的 BFC 創建方式
3. 兼容性考慮：如果需要支持舊瀏覽器，`overflow: hidden` 或 clearfix 方法更可靠