CSS

Common

外边距：垂直方向

外边距合并 ( margin collapsing ) 主要适用于块级元素。具体来说，当两个或多个块级元素的垂直外边距相邻时，它们的外边距会合并为其中较大的一个。

合并是连锁的，即

<style>
	.ht0 {
		margin: 10px auto;
	}
</style>
<body>
	<div class="ht0"></div>
	<div class="ht0"></div>
	...
</body>

最终合成的 margin 仍为 10px.

外边距合并不会发生在行内元素、浮动元素（float）、绝对定位元素（position: absolute 或 position: fixed）、表格元素 (table) 上，etc.

e.g.

<!-- body-margin=8px -->
<style>
	.top {
		margin: 10px auto;
		width: 1200px;
	}
	.bottom {
		margin: 4px 8px;
		margin-bottom: 20px;
		height: 100px;
	}
</style>

<body>
	<div class="top"></div>
	<div class="bottom"></div>
</body>

本例中，div.top 没有高度，因此共发生两部分垂直外边距合成：

顶部 - $max \{$ body:margin-top .top:margin-top .top:margin-bottom .bottom:margin-top $\}$
底部 - $max \{$ .bottom:margin-bottom body:margin-bottom $\}$

最终，网页总高度 130( 10 + 100 + 20 ) px.

如果 div.top 拥有高度，则 .top:margin-bottom 与 .bottom:margin-top 合成，结果为 10px.

外边距塌陷

触发 BFC^[1]。

外边距合并

只设置单向 margin^[1:1]。

溢出计算

水平 - 子元素总宽度 ( 包括 margin ) 与父元素宽度比较
垂直 - 由于外边距塌陷，子元素 margin 不计入比较

水平方向自适应

结论：若未设置宽度，则宽度自动计算；否则在外边距上调整。

考虑如下样式：

div {
	width;
	margin: 0 auto;
}

当网页宽度 ( html:width ) 小于元素宽度 ( 内容 + 填充 + 边框 ) 时，从右侧引入负边距。

若宽度和水平外边距均已设置，则根据子元素从父元素左上角开始排布的规则，优先保证左侧外边距，然后依次保证元素宽度和右侧外边距。

清除浮动

双伪元素法

固定用法^[2] ^[3] ^[4]，一前一后形成闭合浮动。

设置 .clearfix::before 的目的是避免 margin-top 方向的外边距合并。因此，display 属性需要设置为 table。