css中解决外边距的重叠和父元素高度塌陷的问题

.clearfix::before
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

<div class="box clearfix"></div>