​ 在两个及以上的盒子嵌套时候，内部的盒子设置的 margin-top 的效果会加到最外边的盒子上，导致内部的盒子margin-top设置失败。

  • 设计一个box1盒子，内部嵌套一个box2盒子，box2内再嵌套一个盒子box3

    即 box1>box2>box3

    通过 box3 的 margin-top 的塌陷，可以看出margin-top传递到了 最外层。

    1. 先展示问题的情况
    2. 提供解决方案
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>margin-top的塌陷</title>
  6. 		<style type="text/css">
  7. 			
  8.                         /*.clearfix:before{
  9. 			    content: '';
  10. 			    display:table;
  11. 			}*/
  12.             
  13.                         .box1{
  14. 				width:400px;
  15.                                 /*width: 406px;*/
  16. 				height:200px;
  17. 				background-color: pink;
  18. 				margin:0px auto 0px;
  19. 			      }
  20. 			.box2{
  21. 				width:400px;
  22. 				height:100px;
  23.                                 /*border:3px dashed #000;*/
  24.                                 /*overflow:hidden;*/
  25. 			      }
  26. 			.box3{
  27. 				width: 396px;
  28. 				height:50px;
  29. 				border:2px dashed red;
  30.                                 /*box3塌陷*/
  31. 				margin-top: 20px;
  32. 			      }
  33. 		</style>
  34. 	</head>
  35.     
  36. 	<body topmargin="0">
  37. 		<div class="box1">
  38.            <!-- <div class="box1 clearfix"> -->
  39. 			<div class="box2">
  40. 				<div class="box3"></div>
  41. 			</div>
  42. 		</div>	
  43. 	</body>
  44. </html>

即先 注释 掉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 的塌陷

即为box2的盒子设置边框，并且为box1的宽度重新设置一下，以免元素溢出

  1. .box1{
  2. 	width:400px;
  3.         width: 406px;
  4. 	height:200px;
  5. 	background-color: pink;
  6. 	margin:0px auto 0px;
  7.      }
  8. .box2{
  9. 	width:400px;
  10. 	height:100px;
  11. 	border:3px dashed #000;
  12.      }

box1与最初一样，box2就加上一句 overflow:hidden;

  1. .box2{
  2. 	width:400px;
  3. 	height:100px;
  4. 	overflow:hidden;
  5.      }

将clearfix选择器的注释去掉，再给最外层div盒子加多一个类选择器 clearfix

  1. .clearfix:before{
  2.                   content: '';
  3.                   display:table;
  4.                 }
  1. <body topmargin="0">
  2. 		<!-- <div class="box1"> -->
  3.                 <div class="box1 clearfix">
  4. 			<div class="box2">
  5. 				<div class="box3"></div>
  6. 			</div>
  7. 		</div>	
  8. </body>

版权声明：本文为fry-hell原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/fry-hell/p/12932302.html