1.参考案例：

image.png

2.代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>12-margin-top塌陷</title>
  9.     <style>
  10.         .box{
  12.             width: 400px;
  13.             height: 400px;
  14.             background-color: red;
  16.             /* 解决塌陷 */
  17.             /* 1.border padding */
  18.             /* 2. overflow:hidden */
  19.             /* 3.实际开发 伪类 */
  21.             /* overflow: hidden; */
  22.             /* border:1px solid green; */
  23.             /* padding: 1px; */
  24.         }
  26.         /* 固定写法 */
  27.        .clearfix:before{
  28.             content: "";
  29.             display: table;
  30.         }
  34.         .son{
  36.             width: 400px;
  37.             height: 200px;
  38.             background-color: green;
  40.             margin-top: 100px;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="box clearfix">
  46.         <div class="son"></div>
  47.     </div>
  48. </body>
  49. </html>

3.效果如下：

image.png

4.相关说明：

  1. 代码参考2018年传智5期python 就业班前端视频