《多栏布局的使用》

开发工具与关键技术： 理解知识点
作者：黄姗姗
撰写时间：2019.2.20

浮动(float)这个也是很重要的一个属性，它的运用也是很广泛的。比如多栏布局，导航，菜单等等，都是要用到浮动这个属性来布局的。

（i标签是一个斜体的效果，一般我们用i标签制作图标）
1.用i标签设置图标之后，样式也设置了。没有效果出来是为什么呢?
是因为 (块级元素还有行内元素)这两个元素是怎么区分呢？
块级元素：给它设置高宽之后，它就可以显示出高宽。默认是占一行的，可以用浮动。
行内元素：而行内元素呢，给它设置高宽它就是不显示高宽。它默认是挨着显示的，直到一行满了才换行。
是这样的。它是通过display的属性控制的。
如果它是一个块级那就是一个block，是一个行内就是inline.

2.float应用多栏布局，用浮动把块级元素并排显示出来，要并排就设置浮动。
图片重叠在一起是因为浮动的影响.设置左浮动之后重叠了，让它显示出来再给另一个元素也设置左浮动就出来了。

3.有时候不需要这个浮动对我们造成的影响那么就需要清除浮动
（clear：both清除左右浮动 overflow：hidden的意思是超出的部分隐藏起来就可以到达清除浮动的效果。 Overflow：auto；的意思就是超出的部分让它以滚动条的形式来进行显示，就是滑动滚动条就可以看到里面的内容了。）
4.当某个元素设置了浮动之后就算它是行内元素也一样可以给它设置高度，display就可以不用写这句代码了。
5. Position 属性控制页面上元素间的位置关系。
releative:相对定位；改变原来的位置
absolute：绝对定位；它的位置在浏览器的左上角
fixed:固定定位；设置固定位置的盒子，当滚动的时候，其它盒子都在滚动，设置固定的盒子它是没有定位的，滚动不了。
相对定位和绝对定位的配合使用：