添加/移除border导致块级元素布局异常问题咨询

这是块级元素的默认行为，新手很容易踩这个坑：

• 当main标签有border时，边框会阻断内部元素的外边距向外传递——段落的margin会被限制在main容器内部，所以你能看到段落和绿色边框之间的间距，main的粉色背景也能正常显示。
• 一旦移除border，main和内部段落都是普通块级元素，此时段落的margin-top会和main的margin-top发生外边距折叠：两个垂直方向的外边距会合并成一个，取最大的那个值。结果就是段落直接顶到页面顶部，main的粉色背景看起来“消失”了——实际上是main的高度被折叠的外边距挤得只剩内容高度，加上它和段落的外边距合并，视觉上就像粉色区域没了。

解决办法（任选其一）： #

• 给main加overflow: hidden或overflow: auto，触发BFC（块级格式化上下文），阻断外边距折叠
• 给main加极小的padding-top: 1px，用内边距替代边框的阻断作用
• 把段落的margin改成main的padding，从根源上避免折叠场景

内容的提问来源于stack exchange，提问作者Reeshav