Float和Position

FLOAT:
float:left;左浮动
float:right;右浮动
浮动产生的问题：
添加浮动会出现父div只能显示边框如图，

6360616037130077926311670.png

清楚浮动造成的问题：
添加<div style="clear:both"></div>

6360616040333423589260647.png

POSITION:
position的三种属性：静态定位，相对定位，绝对定位。
静态定位：static,为默认值，没什么效果，按照正常的定位方式定位。
相对定位：relative,相对初始的位置发生改变，例：<div style="position:relative;top:10px;left:10px">相对定位</div>指向下向右各移动10px的距离。
绝对定位：absolute：根据第一个父元素进行定位，可以认为是window。
fixed:设定目标的位置不会随滚动条的滑动而改变。