<!DOCTYPE html>
<html lang=
"en">
<head>
<meta charset=
"UTF-8">
<title>Document</title>
<style>
.clearfix::before,
.clearfix::after{
content: '';
display: block
;
clear: both
;
}
.a,.b{
border: orangered 5px solid
;
}
.a2{
width: 200px
;
height: 200px
;
background-color: orchid
;
float: left
;
}
.b2{
width: 200px
;
height: 200px
;
background-color: palegreen
;
margin-top: 20px
;
}
</style>
</head>
<body>
<!-- 高度塌陷 -->
<div class=
"a clearfix">
<div class=
"a2"></div>
</div>
<br/>
<!-- 外边距重叠 -->
<div class=
"b clearfix">
<div class=
"b2"></div>
</div>
</body>
</html>
