浮动的原理是在当前位置浮起来，有点类似于PPT里面的置于上一层。当浮动盒子前面有非浮动的一个盒子的时候，排版和布局都不会有变化。当后面有非浮动的盒子时，后面的盒子会补上浮动的那个位置。
当时做这个练习的时候，可能很多都会想到设置3个块。上面白色部分一个块，中间蓝色部分一个块，下面的文字一个块。当时我的第一感觉就是要用浮动来完成。先把蓝色部分设置为一个块，放在前面。再把白色部分设置为一个块，放在后面。把正文字体和顶部的空白部分留足。然后把蓝色块浮动起来，空白白色部分就补上的前面蓝色部分的位置（相当于白色空白插了上去，有一部分被蓝色块挡住）。
#titlebox{
1781px;
height:150px;
border: 5px solid #14414e;
text-align: center;
background-color: #267890;
margin-left: 60px;
margin-top: 50px;
float: left;
}
#biaoti{
font-size: 42px;
color: #ffffff;
padding-top: 20px;
background-color: #267890;
}
完成一个项目要求的方式很多，没有一个固定的模式。每个人的思维方式不一样，也会影响一个项目完成的方式。适合自己的才是最好的.。