DIV+CSS三列布局实战，左右侧边栏+中间主体
一、三列布局的类型
三列布局是PC端门户网站、资讯网站、综合平台最常用的复杂布局，核心结构为左侧侧边栏、中间主体内容区、右侧侧边栏，三列模块横向并排，中间主体宽度最大，承载核心内容，左右侧边栏放置辅助内容，是两列布局的进阶版本，结构更完整，内容承载量更大，适合大型页面
三列布局主要分为两种主流类型，第一种是固定宽度三列布局，左、中、右三列宽度全部固定，总宽度等于父级版心宽度，布局稳定，不会缩放变化，适合企业官网、产品展示站、设计规范严格的网站，新手入门优先学习。第二种是圣杯布局/双飞翼布局，左右侧边栏固定宽度，中间主体区域自适应宽度，是经典的三列自适应布局，适合门户网站、综合资讯平台，属于进阶布局技巧。
三列布局的核心逻辑和两列布局完全一致，都是通过float浮动实现横向并排，通过宽度计算控制三列比例，父级容器清除浮动解决高度塌陷，唯一的区别是多了一列模块，宽度计算更严谨，只要掌握两列布局，三列布局可以无缝衔接，没有新的知识点，只是
二、固定宽度三列
固定宽度三列布局是新手入门的标准版本，宽度固定，计算简单，不易出错，制作流程分为标准化五步，和两列布局逻辑一致，新手可以直接复用步骤。
第一步，搭建标准HTML结构，创建一个父级包裹DIV，作为三列的外层容器，内部依次创建三个并列的子级DIV，分别对应左侧侧边栏、中间主体区、右侧侧边栏，三个子级DIV同级，无嵌套关系，结构层级清晰，class类名命名规范，见名知意。
第二步，设置父级容器样式，给父级DIV设置固定总宽度，主流标准为1200像素，设置margin:0 auto; 实现页面水平居中，作为整个三列布局的版心，控制整体布局位置，无需设置高度，由子级内容自动撑开高度。
第三步，设置左右侧边栏宽度，左侧侧边栏常规宽度设置为260像素，右侧侧边栏常规宽度设置为260像素，两个侧边栏宽度可以相同，也可以根据需求调整，全部设置float:left; 左浮动，同向浮动保证横向并排排列，设置背景色、内边距、边框样式
第四步，计算并设置中间主体宽度，父级总宽度1200px，减去左侧宽度260px，减去右侧宽度260px，再减去三列之间的左右间距40px，最终得到中间主体宽度640px，给中间DIV设置这个固定宽度，同样设置float:left; 左浮动，和两侧保持同向浮动，设置内边距、内容样式
第五步，清除浮动解决高度塌陷，给父级包裹容器添加通用清除浮动类名，让父级高度自适应撑开，正常显示背景色、边框样式，避免布局错乱，整个固定宽度三列布局就完整实现。
三、三列布局宽度计算规则与避
三列布局最核心的要点，就是宽度精准计算，只要宽度计算正确，就不会出现换行、错位问题，计算有固定的公式，新手直接套用即可，绝对不会出错。
标准计算公式：左侧固定宽度 + 中间固定宽度 + 右侧固定宽度 + 左侧与中间间距 + 中间与右侧间距 ≤ 父级容器总宽度。核心规则是，三列总宽度+总间距，必须小于或者等于父级宽度，绝对不能大于父级宽度，这是避免右侧模块掉落的唯一标准
避坑第一要点：内边距和边框必须计入总宽度，标准盒模型下，width宽度只是内容宽度，padding和border会额外撑大盒子总尺寸，计算时必须把左右padding、左右border全部计入总宽度，很多新手只计算width宽度，忽略padding和border，导致总宽度超出，布局
避坑第二要点：三列浮动方向必须完全统一，全部设置左浮动，绝对不要左侧左浮动、右侧右浮动，混用浮动方向会导致排列顺序错乱、位置偏移、无法对齐问题，常规三列布局，全部统一使用左浮动。
避坑第三要点：间距只设置单边外边距，三列之间的间距，只给左侧DIV设置margin-right，中间DIV设置margin-right，不要给对应右侧DIV再设置margin-left，避免外边距合并，间距加倍，总宽度超出，只需要单边设置间距，即可精准控制距离。
第一个高频问题：右侧或者中间模块掉到下方，整排错位换行。100%是总宽度超出父级容器，解决方法：第一步检查总宽度计算是否正确，第二步检查子级DIV的padding、border是否计入宽度，第三步减少子级宽度或者间距尺寸，保证总宽度小于父级宽度。
第二个高频问题：父级容器无高度，背景色不显示，下方模块上移重叠。完全是未清除浮动导致的高度塌陷，解决方法：给父级包裹DIV添加通用清除浮动伪类样式，无需修改其他代码，直接生效，解决塌陷问题
第三个高频问题：三列模块垂直排列，没有横向并排。核心原因是未设置浮动，或者浮动样式书写错误、语法错误，解决方法：检查三个子级DIV是否都设置了float:left;，检查CSS语法是否有分号缺失、冒号错误，修正浮动样式，即可横向排列。
