经过两天的H5学习之后，做了一下ｆｌｏａｔ属性的练习，要做出来的效果为：
下面为代码部分，所用到的知识不多，不过才现在刚开始，以后要学的东西还有很多，大家继续加油！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float练习</title>
<style>
.all{
width: 620px;
text-align: center;
border:1px solid black;
overflow: hidden;
}
.all .head{
border:1px solid red;
width: 122px;
height: 120px;
float: left;
}
.clear{
clear: both;height: 0px;overflow: hidden;
}
.all .six{
float: left;
width: 404px;
height: 182px;
border:1px solid black;
}
.all .seven{
width: 212px;
height: 222px;
float: right;
border:1px solid black;
}
.all .ba{
width: 257px;
height: 187px;
float: left;
border:1px solid black;
}
.all .jiu{
width: 145px;
height: 187px;
float: left;
border:1px solid black;
}
.all .d10{
width: 212px;
height: 246px;
float: right;
border:1px solid black;
}
.all .d11{
width: 404px;
height: 97px;
float: left;
border:1px solid black;
}
.all .d12{
float: left;
width: 618px;
height: 72px;
border:1px solid black;
}
</style>
</head>
<body>
<div class="all">
<div class="head">1</div>
<div class="head">2</div>
<div class="head">3</div>
<div class="head">4</div>
<div class="head">5</div>
<div class="clear"></div>
<div class="six">6</div>
<div class="seven">7</div>
<div class="ba">8</div>
<div class="jiu">9</div>
<div class="d10">10</div>
<div class="d11">11</div>
<div class="d12">12footer</div>
</div>
</body>
</html>