初学浮动的一点心得

最新推荐文章于 2021-06-17 04:34:46 发布

dizhan4240

最新推荐文章于 2021-06-17 04:34:46 发布

阅读量115

点赞数

原文链接：http://www.cnblogs.com/gao2/p/11250428.html

版权

浮动的原理是在当前位置浮起来，有点类似于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;