一、问题描述 在两个及以上的盒子嵌套时候，内部的盒子设置的 margin-top 的效果会加到最外边的盒子上，导致内部的盒子margin-top设置失败。 – 示例描述： ==设计一个box1盒子，内部嵌套一个box2盒子，box2内再嵌套一个盒子box3== > 即 box1>box2>box3 通过 box3 的 margin-top 的塌陷，可以看出margin-top传递到了 ==最外层==。
margin-top塌陷问题
一、问题描述
在两个及以上的盒子嵌套时候，内部的盒子设置的 margin-top 的效果会加到最外边的盒子上，导致内部的盒子margin-top设置失败。
-
示例描述 设计一个box1盒子，内部嵌套一个box2盒子，box2内再嵌套一个盒子box3
即 box1>box2>box3 通过 box3 的 margin-top 的塌陷，可以看出 如果box1和box2都没有边框或没有做特殊方案处理，box3的margin-top效果就会传递到 最外层。
-
先展示问题的情况
- 提供解决方案
代码描述：
margin-top的塌陷
/*.clearfix:before{
content: '';
display:table;
}*/
.box1{
width:400px;
/*width: 406px;*/
height:200px;
background-color: pink;
margin:0px auto 0px;
}
.box2{
width:400px;
height:100px;
/*border:3px dashed #000;*/
/*overflow:hidden;*/
}
.box3{
width: 396px;
height:50px;
border:2px dashed red;
/*box3塌陷*/
margin-top: 20px;
}
- *图片示意：
塌陷前：
即先 注释 掉box3样式里的 margin-top:20px; 注意看最顶部是与浏览器顶部 接触的
PS:下图中，蓝色部分是通过Ctrl+Shift+C，鼠标审查元素，指示到box2，用于显示box2的颜色，并非实际box2的背景色，box2没有设定背景色（请仔细看上方代码）
塌陷后：
取消box3样式里的注释 margin-top:20px;
情况分析：
① 注意看浏览器顶部和最外层的盒子box1出现了距离，虽然实际还是box3里的margin-top样式，但却将效果表现在了box1上。
② 而正常情况应该是box3与box2之间产生分离才对，所以这就是 margin-top 的塌陷
二、解决办法
1. 外部盒子设置一个边框
即为box2的盒子设置边框，并且为box1的宽度重新设置一下，以免元素溢出
.box1{
width:400px;
width: 406px;
height:200px;
background-color: pink;
margin:0px auto 0px;
}
.box2{
width:400px;
height:100px;
border:3px dashed #000;
}
效果如下：
box1与最初一样，box2就加上一句 overflow:hidden;
.box2{
width:400px;
height:100px;
overflow:hidden;
}
效果如下：
将clearfix选择器的注释去掉，再给最外层div盒子加多一个类选择器 clearfix
.clearfix:before{
content: '';
display:table;
}
效果如下：
Original: https://www.cnblogs.com/fry-hell/p/12932302.html
Author: 油炸地狱
Title: margin-top塌陷
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/611810/
转载文章受原作者版权保护。转载请注明原作者出处！