1.在高度塌陷的父元素的最后添加一个空白的div,不设置浮动，对其进行清除浮动clear，
2.通过伪类选择器结合after，添加一个内联元素，然后转换为块元素，再清除浮动clear
<style> .box1{ border:solid green 1px; } .box2{ width: 200px; height: 200px; background-color:hotpink; float: left; } .clearfix:after{ content: ""; display: block; clear: both; } </style> <body> <div class="box1 clearfix"> <div class="box2"> </div>
父子块元素垂直外边距，修改子元素的上外边距会导致父元素的上外边距也下沉，用伪类给父元素前添加一个content，设置位块元素
.clearfix::before{
content:"";
display: table;
}