<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; } /* .box1::before{ content: ''; display: table; } */ .box2{ width: 100px; height: 100px; background-color: orange; margin-top: 100px; } /* clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可 */ .clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; } </style> </head> <body> <div class="box1 clearfix"> <div class="box2"></div> </div> </body> </html>