老师，我想问
请问下什么时候会发生父元素高度塌陷的问题呢？
是不是当父元素position fixed 或 absolute, 其子元素又设置了margin-top，这样会发生呢？
可是如果是这样，那下面这种情况：
.sub-menu {
width: 730px;
height: 458px;
/* 子菜单定位在主菜单的右边,相对于main定位 */
position: absolute;
left: 244px;
top: 0;
background: #fff;
z-index: 3;
border: 1px solid #d9dde1;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}
.sub-menu>.inner-submenu {
/* 跟父盒子sub-menu一样大 */
width: 100%;
height: 100%;
background: url('../img/fe.png') no-repeat;
}
.inner-submenu>.submenu-content {
width: 652px;
margin-left: 40px;
/* 这个元素设置overflow: hidden;不是为了隐藏内容，而是为了解决外边距塌陷。 */
/* 父元素在没有设置padding-top或者border的时候，也会跟随子元素一起跑下来。 */
overflow: hidden;
}
.submenu-content>.title {
font-size: 16px;
color: #f01414;
line-height: 16px;
font-weight: bold;
/* 这里设置了margin-top,这个元素的父元素在没有设置padding-top或者border的时候，也会跟随子元素一起跑下来。 */
/* 有了padding-top或者border-top，其父亲.submenu-content就可以不用overflow: hidden; */
/* padding-top:20px; */
/* 上右下左 */
margin: 28px 0 30px 0;
}
.title的父亲没有定位，为什么title设置了margin-top之后会造成它的父亲高度塌陷呢？是因为.title的祖先元素(好几代之前的.sub-menu)设置了定位吗？麻烦老师了，谢谢
正在回答 回答被采纳积分+1
同学你好，虽然它们可能使用同一个方法可以解决这个问题，但是本质上是有区别的，不能说margin传递和高度塌陷是一个结果。参考如下理解：
产生的结果不一样：
高度塌陷是因为子元素设置定位或者浮动脱离文档流，父元素自己又没有设置高度，也无法让子元素撑开高度，所以高度为0（即高度塌陷）。
产生的问题是父元素高度为0：
而margin传递，是说的子元素设置margin-top，本应该自己往下移动，但是父元素也跟随往下移动。和前面说的高度塌陷产生的结果不一样：
另外，解决方式中，会有相同的。但是并不是所有的都相同，例如设置border可以解决margin传递问题，但是不可以解决高度塌陷。这个建议同学自己多练习，通过效果总结一下哦。
祝学习愉快~
同学你好，解答如下：
1、父元素高度塌陷，可以理解为子元素无法撑起父元素的高度，一般情况下，子元素浮动、子元素设置固定定位和绝对定位时会出现此类情况。
2、同学提到的下方描述，是不会出现高度塌陷的情况。
3、是出现了下方的问题吗？
效果：
这是发生了margin传递。也就是：在父子结构里，如果子元素设置了margin-top值，会出现一个问题，就是子元素的margin-top会作用到父级元素。遇到这种情况，有如下几种解决方法：
（1）给父元素添加border或border-top。
（2） 给父元素添加padding或padding-top。
（3）给父元素设置overflow:hidden。
（4）给父元素设置float属性
（5）给父元素设置绝对定位或者固定定位
（6）将子元素margin-top,变为padding-top。
4、同学只提供了一部分css代码，并且有些类名和源码并不一样，老师不能准确的知道同学到底遇到了什么问题，如果不是第3点描述的问题，建议同学把遇到的问题详细描述一下，并把完整的代码粘贴上来，老师帮助测试。祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星