请问为什么父元素一定要设overflow: hidden; 子元素的margin才有效? 不设置的话父元素也会跟着margin跑_教程

好问题。其实不是一定要设置overflow:hidden，或者说也有别的方式。

这个问题源自于 w3c 对和模型的规范 collapsing margins ( 外边距折叠）部分。

如果您可以阅读英文，不需要看我下面的回答，请直接移步 w3c 相关规范页面：https://www.w3.org/TR/CSS2/box.html#collapsing-margins

简单的解释，抛个砖，更多细节您还是自己多查资料比较好：

我相信大家都知道CSS规范中有对相邻的节点的margin进行折叠的相关内容，但是可能不知道这个相邻的节点并不仅仅是说兄弟节点。也包含父子节点。

在对相邻（adjoining）节点的定义里面，有一些要求，比如有一条：

两个节点必须同属于一个块级盒模型，同一个块级格式化上下文(自行百度BFC)。

overflow : hidden 可以解决这个问题的原因就在于此。因为 overflow : hidden 可以创建新的BFC。

还有很多其他的办法解决这个问题，比较加padding、border 等等。

平均分布，也跟margin没什么关系啊，它只是一个外边距而已。

你说的平均匀分布，不知道是不是，容器里几个宽度平均分？

如果是你可以用box-flex来实现。

<style>

div

{

display:-moz-box /* Firefox */

display:-webkit-box /* Safari and Chrome */

display:box

width:300px

border:1px solid black

}

{

-moz-box-flex:1.0 /* Firefox */

-webkit-box-flex:1.0 /* Safari and Chrome */

box-flex:1.0

border:1px solid red

}

</style>

</head>

<body>

<div>

<p>Hello</p>

</div>

box-flex：元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

欢迎分享，转载请注明来源：内存溢出

请问为什么父元素一定要设overflow: hidden; 子元素的margin才有效? 不设置的话父元素也会跟着margin跑