认识垂直外边距合并
对于 HTML 中排列相邻的块级元素，其垂直外边距可能会合并，形成单一的较大外边距。这种现象被称为垂直外边距合并。
垂直外边距合并后，会根据元素的类型和上下文环境产生不同的情况：
- 相邻元素同类型：相邻块级元素的外边距仅合并 top 或 bottom 边距之一。例如，两个块级元素的 top 外边距会合并，形成较大的 top 外边距，而 bottom 外边距保持不变。
- 非相邻元素同类型：如果相邻元素被其他非块级元素（如行内元素）分隔，则外边距合并规则不会适用。
- 首尾元素不同类型：当第一个和最后一个相邻元素类型不同时，仅首个元素的 top 外边距和最后一个元素的 bottom 外边距参与合并。
- 相邻元素中有 float：如果相邻块级元素之一设置了 float 属性，则外边距合并规则失效。
需要注意，垂直外边距合并可能会导致元素排列异常，需要通过一些方法来阻止，例如：
- 添加边框 (border)
- 添加内边距 (padding)
- 建立块级格式化上下文 (BFC)
