<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style type="text/css">
.img {
float: left;
}
p .clear img {
clear: both;
}
.box1 {
width: 200px;
height: 200px;
background-color: aqua;
}
.box2 {
width: 300px;
float: right;
height: 300px;
background-color: darkblue;
}
.clear::after{
display: block;
content: "";
clear: both;
}
</style>
</head>
<body>
<div class="container clear">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div>
<img class="img" src="img/01.jpg" width="200px" height="100px" />
<p><img src="img/04.jpg" width="200px" height="100px"></p>
<p class="clear"><img src="img/04.jpg" width="200px" height="100px"></p>
</div>
<!-- clear:none默认 不清除浮动
clear:left 清除左浮动
clear:right 清除右浮动
clear:both 清除左右浮动 -->
</body>
</html>