子/父元素外边距重叠最终解决方案before伪类元素 · 前端

[css 子级元素设置margin-top父级元素会跟着移动问题解决](https://blog.csdn.net/weixin_67375532/article/details/125357764) 根据规范，一个盒子如果没有上边补白(padding-top)和上边框，那么它的上边距应该和其文档流中的第一个子级元素的上边距重叠 ~~~ <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: deeppink; } .box3{ width: 100px; height: 100px; background-color: blue; margin-top: 100px; } </style> </head> <body> <div class="box1"> <div class="box3"></div> </div> </body> </html> ~~~ 发现不是box3往下走，而是父元素box1往下走100px，因为父类容器没有border和padding的时候父元素box1和之元素box3的外边距发生重叠，子元素的外边距传递给了父元素的（当然我们可以给父元素border和padding但是不是完美的解决方案） ![](https://img.kancloud.cn/5f/f0/5ff0266d5994f446fdf87f0adb0bba9b_1263x306.png) 在BFC中给box1启用BFC`overflow:hidden`可以解决此问题，但是在某些时候有副作用我们可以使用.box1::before伪元素完美解决 ``` .box1::before{ content: ""; display: table; } ``` ![](https://img.kancloud.cn/ab/7c/ab7c412a3735f6bd081973e092b18165_239x155.png)