为何overflow设visible时div出现间隙，设auto/hidden时间隙消失？

嗨，这个问题其实是CSS里非常常见的**外边距折叠（Margin Collapse）现象，结合块级格式化上下文（BFC）**的特性就能完全理解啦！

为什么会出现间隙？ #

咱们先看你的代码：#hero-container里面的<p>元素，浏览器的默认样式会给它加上上下外边距（你看到的40px就是这个默认margin的体现）。而#hero-container本身没有设置border、padding，也没有触发BFC，这就导致了子元素的外边距会穿透父元素——简单说就是<p>的上下margin会“跑到”#hero-container的外面，和上方的#header、下方的区域形成间隙，看起来就像是#hero-container自己有了上下margin一样。

这就是CSS的外边距折叠规则：当父元素和子元素都是块级元素，且父元素没有创建BFC、没有border/padding做隔离时，子元素的外边距会和父元素的外边距（这里父元素margin为0，但会影响外部元素的间距）发生折叠，最终表现为外部的间隙。

为什么overflow:auto/hidden能解决问题？ #

当你给#hero-container设置overflow:auto或者overflow:hidden时，这个元素会创建一个块级格式化上下文（BFC）。BFC有几个关键规则，其中一条就是：

BFC内部的元素外边距不会和外部元素的外边距发生折叠，同时也会限制子元素的外边距不会穿透到父元素之外。

也就是说，一旦#hero-container变成了BFC，<p>的上下margin就会被“包裹”在容器内部，不会再跑到外面去，自然就和上下的div贴合了。

而overflow:visible是默认值，它不会触发BFC的创建，所以外边距折叠的问题依然存在。

除了overflow，还有其他解决方法吗？ #

当然，触发BFC的方式不止overflow一种，你也可以用这些更语义化的方法：

• 给#hero-container设置display: flow-root：这是CSS专门为创建BFC设计的属性，不会带来overflow可能导致的滚动条或内容截断问题，非常适合这种场景。
• 给#hero-container添加透明边框：比如border: 1px solid transparent，用border隔离子元素的margin。
• 给#hero-container设置padding：比如padding: 1px 0，同样能隔离子元素的margin。

内容的提问来源于stack exchange，提问作者J. Doe