Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此我们必须明确设计站点的目的和用户的需求，从而做出切实可行的设计方案。今天小编为大家带来的是用CSS的float创建三栏布局 ，这里详细的介绍了网页三栏布局的3种方式，希望能对大家有所帮助。
三栏布局是现在广泛使用的网页布局，主要页面内容放在中间的一栏，左右边上的两栏放置导航链接等内容。基本布局是标题之下放置三栏，三栏占据整个网页页面的宽度，最后在网页页面的底端放置页脚，页脚也是占据整个页面宽度。
网页三栏布局的3种方式：
第一种：代码稍长，但是比较实用，页面主体先显示出来，就是网速慢时，网页的.主体内容先呈现给浏览者。
第二种：比较容易实现，也比较直观，左边的左浮动，右边的有浮动，主体不浮动。缺点是ie6会出现3px bug，这要求栏目宽度固定，所以不太灵活。
第三种：定位布局，同样比较直观，三栏的显示顺序完全按照文档的顺序。
很多网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页。
现在，我们都开始放弃基于表格的布局技术，许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法。用绝对定位的方法从CSS中得到固定宽度的布局并不困难;但是到液态布局就多少有点困难了。
用CSS的float和clear属性来获得三栏液态布局的方法：
基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充(padding)属性保证内容安排在一个整洁的栏中，甚至当它伸展到边栏(左栏或者右栏)的底端也是这样。
当我们渐渐依靠CSS而使样式表日渐复杂时，需要正确的计划来尽可能的避免犯错，并使代码方便维护。CSS的工作方式以及文件、选择器和属性的多种组织方案，必定有助于我们写出优质的代码，经受的了时间的考验。