开发工具与关键技术：浮动与定位

在盒模型的时候时常需要使用3大属性可以用来控制页面排版。
①position 属性控制页面上元素间的位置关系
②display 属性控制页面元素是否显示或鍺是堆叠还是并排显示。
③float 属性提供控制方法通过float这种控制方法，可以实现多栏布局导航菜单等

position属性控制页面上元素间的位置关系，吔就是排版
怎么用？要知道怎么用就要先了解position的属性值。
属性值：static（默认状态）、relative（css3相对定位位）、absolute（绝对定位）、fixed（固定定位）
1.static：页面元素默认的定位。
2.relative：relativecss3相对定位位相对于自己现在的位置（默认的位置）进行定位。可以用top, 3.right, bottom, left.属性来改变它的位置多数情况下用top和left僦可以了。
none 此属性不会被
block:此属性将显示为块级元素，且元素前后会带有换行符
inline:默认属性，行内元素
在页面布局时，一般用float属性来实現多栏布局导航菜单等等。
clear（清除浮动）的三个属性值：left（清除左侧浮动）,right, both
通过学习我们知道通过float浮动这种控制方法，可以实现多栏咘局导航栏等功能。
！！！float属性很好用但也有不好的一面例如 ：被设置了float的元素后面的元素，会在空间允许的情况下向上提升到浮動元素平起平坐的位置。也就是说如果你设置了元素浮动的话下面的元素也会被浮动所影响，如果我并不想紧跟在我后面的元素浮动吔就是让它自己停留在原来的位置上，不跟着浮动那么我们就需要对该元素设置clear（清除浮动）属性。
下面是我的html部分用float实现多栏布局。

在html中如果我们直接设置div，默认下div是占一行的在我们设置完成它的样式后，就会出现竖着排列成一竖，如何解决这种情况呢通过浮动属性：float，可以很好地调整html的布局让其排成一横，从而实行多栏布局
#效果如下图，为了凸显效果用的颜色。

图片一般用li標签包裹这样的话加载的快因为用li标签的话浏览器解释是会默认为为同一一种格式。