三列布局

在平时的网页的制作过程中，经常会碰到三列布局的界面

方法一：

1.先用一个大的div包括所有的内容元素

2.根据界面排版，将界面划分为左，中，右三个区域

3.对相应的左与右侧的区域采用固定宽度以及浮动

注意：

1.由于左和右侧的区域采用了浮动，则会脱离原来的文档流，就不会被大的div区域所包括，所以必须让父元素包裹子元素来清除子元素的浮动即overflow:auto，若需要在ie6中使用，则还需要添加zoom:1

2.中间的内容区域采用内容自适应的方法，由于左侧与右侧的区域是脱离了文档流的，只是被父元素包裹，但是并不会占据其位置，所以中间的区域在内容足够大的时候会扩展到与父元素同宽，所有直接设置合适的margin-left与margin-right的值即可

总结：大元素包裹浮动子元素的清除浮动的方法:overflow:auto;zoom:1(适配ie6)

相应代码链接地址:https://git.oschina.net/wwwww11/baidu_ife/tree/master/mission3

 清除浮动完整解读：http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use,http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html

转载于:https://www.cnblogs.com/DaiDaiPan/p/6000998.html