<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.box1{
width:300px;
border:1px solid red;
overflow:hidden; /*好处1:没有高度可以根据内容撑出高度*/
}
.pp1{
float: left;
width:50px;
height:70px;
background-color:deeppink;
margin-right:10px; /*好处2margin生效了,可以用了*/
}
.pp2{
float: left;
width:50px;
height:100px;
background-color:yellowgreen;
margin-right:10px; /*好处2:margin生效了,可以用了*/
}
.pp3{
float: left;
width:50px;
height:150px;
background-color:blue;
}
</style>
</head>
<body>
<div class="box1">
<p class="pp1"></p>
<p class="pp2"></p>
<p class="pp3"></p>
</div>
</body>
</html>