<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
.box1{
width:100px;
height:100px;
background-color:pink;
float:left;
margin:10px 10px;
}
.box2{
width:100px;
height:100px;
background-color:pink;
float:left;
margin:10px 10px;
}
.box3{
width:100px;
height:100px;
background-color:pink;
float:left;
margin:10px 10px;
}
.fox1{
width:100px;
height:100px;
background-color:pink;
margin:10px 10px;
}
.fox2{
width:100px;
height:100px;
background-color:pink;
margin:10px 10px;
position:relative;
left:240px;
top:-110px;
}
.fox3{
width:100px;
height:100px;
background-color:pink;
margin:10px 10px;
position:relative;
left:120px;
top:-220px;
}.hox1{
width:100px;
height:100px;
background-color:pink;
margin:10px 10px;
display:inline-block;
}
.hox2{
width:100px;
height:100px;
background-color:pink;
margin:10px 10px;
display:inline-block;
}
.hox3{
width:100px;
height:100px;
background-color:pink;
margin:10px 10px;
display:inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<br clear="all"/>
<div>大家好我是float同学</div>
</div>
<div class="fox">
<div class="fox1"></div>
<div class="fox2"></div>
<div class="fox3"></div>
<div>大家好我是position同学</div>
</div>
<div class="hox">
<div class="hox1"></div>
<div class="hox2"></div>
<div class="hox3"></div>
<div>大家好我是inline-block同学</div>
</div>
</body>
</html>
