CSS实现网页布局(一列，两列，三列)

1.一列布局（又叫单列布局）
一列布局需要掌握3个知识点：标准文档流，其中又包含了块级元素和行级元素，还有margin属性，可以说实现一列布局的关键代码就是由margin属性实现的，通过设置margin:0 auto;来实现水平居中，auto就是它会根据浏览器的宽度自动设置两边的外边距。要设置margin，你首先得有一个盒子模型，比如这里的div，然后设置它的长宽，有一个固定的大小，才可以实现居中。

<style type="text/css">
	body{margin:0;padding:0;}
	.head{heigth:200px;background:blue;}
	.main{height:500px;width:800p;margin:0 auto;}
	.footer{background:blue;height:200px;width:800px;margin:0 auto;}
</style>

<div class="head"> This is head !</div>
<div class="main"> This is main !</div>
<div class="footer"> This is footer !</div>

2.二列布局（两列自适应）
浮动：
块级元素都是一行一行这样排列的，需要把两个块级元素并排时，就需要用到CSS中的浮动布局float，float有三个属性值，
left-左浮动，right-右浮动，none-不浮动&