CSS定位、CSS浮动、自适应布局

一、CSS定位 

（一）CSS定位简介

1、CSS 中 position 规定了元素的定位方式。

2、CSS 可以通过设置 position 属性使 HTML 元素脱离正常文档流布局，从而使元素可以显示在任意位置。

（二）position 属性的可选值

1、relative 相对定位：相对于元素本身在标准流中的位置。示例：   

position: relative;            
    top:20px;            
    left:30px;  

2、absolute 绝对定位：相对于该元素开启了定位的父元素作为参考位置。示例：

position: absolute;            
    top:40px;            
    left:50px;        

3、fixed 固定定位。

4、static 默认值，即未定位。

5、sticky 粘贴定位。

二、CSS浮动

（一）CSS浮动简介

1、CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧。

2、float 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动。

3、float 属性与 position 属性会相互影响，设置时要多加小心。

（二）float 属性的常用值

1、left 靠左浮动

2、right 靠右浮动

3、none 不浮动

4、clear:both  清除浮动

（