<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
background-color: #bfa;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
/*
子元素和父元素相邻的垂直外边距会发生重叠，子元素外边距会传递给父元素
使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠
*/
margin-top: 100px;
}
.box3 {
border: 1px solid black;
}
.box4 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/* 解决父子元素的外边距重叠 */
/* .box1::before {
content: ""; */
/* 可以将一个元素设置为表格显示 */
/* display: table;
} */
/* 解决父元素的高度塌陷 */
/* .clearfix::after {
content: "";
display: block;
clear: both;
} */
/*
经过修改后的clearfix是一个多功能的
既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
*/
.clearfix::before,
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
zoom: 1;
}
</style>
</head>
<body>
<div class="box3 clearfix">
<div class="box4"></div>
</div>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
