初学浮动的一点心得

浮动的原理是在当前位置浮起来，有点类似于PPT里面的置于上一层。当浮动盒子前面有非浮动的一个盒子的时候，排版和布局都不会有变化。当后面有非浮动的盒子时，后面的盒子会补上浮动的那个位置。

当时做这个练习的时候，可能很多都会想到设置3个块。上面白色部分一个块，中间蓝色部分一个块，下面的文字一个块。当时我的第一感觉就是要用浮动来完成。先把蓝色部分设置为一个块，放在前面。再把白色部分设置为一个块，放在后面。把正文字体和顶部的空白部分留足。然后把蓝色块浮动起来，空白白色部分就补上的前面蓝色部分的位置（相当于白色空白插了上去，有一部分被蓝色块挡住）。

#titlebox{

width: 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;

}

完成一个项目要求的方式很多，没有一个固定的模式。每个人的思维方式不一样，也会影响一个项目完成的方式。适合自己的才是最好的.。