任何一个学习前端的同学都离不开网页的布局，而学习网页布局最先遇到的一个大问题就是三列布局。三列布局看似简单，确包含了很多知识点。文档流和定位的问题。
工具/原料
1
float
2
postiton
方法/步骤
1
先写好基本样式，以及效果图
2
第一种方法：首先写出两个div，让第一个div左浮动，第二个div右浮动，第三个div直接以文档流去定位。由于第一个和第二个div是浮动流定位，所以会脱离文档流，并且第一个div会浮动到父容器区域的左边，第二个div会浮动到父容器的右边，在一排中显示。这时候第三个div由于是文档流定位的，且如果不设宽度或默认成100%，会随着浏览器窗口变化宽度的，因此前面两个浮动流区块会部分遮住此文档流区块，这时只用对此区块设置左右margin即可。
3
第二种方法：省去了float,直接用positon去定位。
注意事项
float和position的原理
下一篇：我的高尔夫礼品