下面来总结一下盒子模型，流式布局，浮动布局，层布局（定位布局）。
1.盒子模型
有二种：IE盒子模型 和 标准w3c盒子模型
1）IE的盒子模型的content包含了padding和border
2）标准的w3c盒子模型有四部分组成：内容（content），填充（padding），边框（border），边界（margin）
提示：盒子模型的3d结构有五层，第一层是border，第二层是content+padding，第三层background-image，第四层是background-color，第五层是margin
2.流式布局（浏览器的默认布局方式）
特点：从上到下，从左到右。
块级元素有：div p h1~h6 ul ol dl table blockquote form
行内元素有：a span em strong label 等
行内块级元素有：img input
3.浮动布局
float有三种属性：left，right，none。
float:left和float:right会使元素从文档流中剥离。
<!doctype html> <html> <head> <title>float</title> <meta charset="utf-8"> <style type="text/css"> .left{width:400px;height:200px,background:blue;float:left;} .right{width:400px;height:200px,background:green;float:right;} </style> </head> <body> <div class="left">left</div> <div class="right">right</div> </body> </html>
4:层布局
position属性有：static，absolute，relative，fixed四种。
其中absolute和fixed都是属于绝对定位，也会从文档流中脱出来。
absolute定位是相对于文档来偏移。
relative定位是相对于自身来偏移。
原文：http://www.cnblogs.com/kevoin/p/4865583.html