一，浮动布局
float：left | right
浮动的属性是浮动，大家都知道用了浮动后整个页面就在一行上布局，常见的有：前端网页布局，导航和商场的应用。
clear浮动属性一般用： clear：both | right| left
个人感悟：浮动属性是最常用的属性，比如你在布局排版的时候，在前端层次设计框架下利用浮动可以使你的网页更加美观
当然一定要注意清除使用后的浮动属性，否则会影响下面的格块等等，从而使得布局乱套。
二，盒子模型
盒子模型是前端里面的一种类似于“嵌套式”架构的一种CSS布局方式，它的存在让前端的布局更加具有简洁，功能齐全，省地方的好处。
margin 外边距
margin-top 上 外边距
margin-right 下 外边距
margin-bottom 左 外边距
margin-left 右 外边距
border 边框
border-top 上边框
border-bottom 下边框
border-right 右边框
border-left 左边框
padding 内边距
padding-top 上 内边距
padding-left 左 内边距
padding-right 右 内边距
padding-bottom 下 内边距
content 内容
span默认inline盒模型，div默认block盒模型形状如下图所示
个人总结：盒子模型也是前端最最最基础的一个布局模式，每一个好的前端开发者都会拥有自己的一个前端开发习惯，最常见的就是盒子模型式开发，层次脉络都会一览无余，代码可读性也相当高，建议务必掌握！
三，position属性
定位属性有两种常用的模式是绝对和相对
position：absolute
绝对定位，这个的意思是以前面最近的布局为基准，不再以浏览器的开始页面为基准来进行定位，此时可以在前布局上进行布局属性的增添。绝对定位的元素的位置相对于的队队队最近已定位祖先元素，如果元素没有已定位的祖先元素，它那么的位置相对于最初的所有游戏块。
position：relative
相对定位，这个很容易理解，如果存在已经用属性布局完毕后，用相对定位可以在它（前一个对象）的基础上进行一定的调整。
position：static
目标对象仅以页面作为参考系
z-index
用于设置目标对象的漂浮层的层序，值大则漂浮在上面
<div style="position:absolute;left:40px;top:20px;width:190px;height:100px;z-index:2;background-color:#ccc;">绝对定位</div>
<div style="position:relative;left:50px;top:10px;width:200px;height:100px;z-index:3;background-color:#999;">相对定位</div>
<div style="position:static;left:100px;top:40px;width:80px;height:88px;z-index:1;background-color:#512;">position:static</div>