DIV+CSS两列布局实战，左侧栏+右侧主体
一、两列布局的应用场景与结构规划
两列布局是PC端网页最常用、最经典的布局模式，比单列布局更实用，比三列布局更简洁，核心结构分为左侧固定宽度侧边栏、右侧自适应主体内容区，两列模块横向并排显示，广泛应用于企业官网、博客网站、资讯平台、后台管理系统、产品展示网站，是前端开发必须掌握的核心布局。
常规两列布局分为两种类型，第一种是固定宽度两列布局，左右两列宽度都固定，总宽度和页面版心一致，结构稳定，不会跟随浏览器窗口缩放变化，适合企业官网、展示型网站，新手入门优先学习这种布局。第二种是左侧固定、右侧自适应两列布局，左侧侧边栏宽度固定，右侧主体宽度跟随浏览器窗口自动缩放，适配不同尺寸屏幕，适合博客、资讯类网站。
两列布局的核心结构，首先需要一个父级容器DIV，作为两列的外层包裹，内部放置两个子级DIV，分别是左侧侧边栏、右侧主体内容区，通过float浮动属性实现两列横向并排，父级容器清除浮动，解决高度塌陷问题，整体结构简单，逻辑清晰，学会单列布局之后，两列布局可以轻松
二、固定宽度两列布局
固定宽度两列布局是新手入门的最优选择，左右宽度固定，计算简单，不会出现宽度错乱、换行问题，制作步骤分为五步，每一步都有明确的规范，新手可以直接跟着步骤操作。
第一步，搭建HTML结构，创建一个父级包裹DIV，设置class类名，内部依次创建两个子级DIV，第一个是左侧侧边栏，第二个是右侧主体区，结构层级清晰，父级唯一，子级并列，不要添加多余的嵌套结构。
第二步，设置父级包裹容器样式，给父级DIV设置总宽度，常规和页面版心保持一致，设置为1200像素，margin:0 auto; 实现页面水平居中，这个父级容器就是两列布局的整体版心，所有样式都在这个宽度内展示。
第三步，设置左侧侧边栏样式，给左侧DIV设置固定宽度，常规侧边栏宽度设置为280像素到300像素，设置float:left; 左浮动，实现横向排列，根据需求设置背景色、内边距、边框，注意总宽度计算，宽度+左右内边距+左右边框，不能超出设定的固定宽度
第四步，设置右侧主体内容区样式，给右侧DIV设置固定宽度，用父级总宽度减去左侧侧边栏宽度，再减去两列之间的间距宽度，得到右侧宽度，同样设置float:left; 左浮动，和左侧保持同向浮动，设置内边距、背景样式，实现两列并排。
第五步，清除浮动解决高度塌陷，给父级包裹容器添加通用清除浮动类名，触发父级高度自适应，撑开高度，显示背景样式，避免下方模块上移重叠，整个固定宽度两列布局就制作完成。
三、左侧固定右侧
左侧固定、右侧自适应布局，是更实用的响应式两列布局，左侧侧边栏宽度固定不变，右侧主体区域会自动占满剩余宽度，浏览器窗口缩放时，右侧宽度自动跟随变化，无需手动计算宽度，适配不同尺寸的电脑屏幕，是目前主流网站的常用布局。
这个布局的核心技巧，就是右侧主体区域不设置固定宽度，不设置浮动，通过左侧浮动元素的环绕特性，实现自适应排列。具体写法为，左侧侧边栏设置固定宽度、左浮动，右侧主体区域不设置宽度、不设置浮动，直接默认宽度100%，浏览器会自动让右侧区域避开左侧浮动元素，占满剩余所有空间，实现
需要注意两个核心细节，第一是右侧区域不要设置overflow:hidden; 否则会触发BFC，彻底避开浮动元素，不会环绕，完美实现自适应布局，同时解决浮动文字环绕问题。第二是右侧区域不要设置宽度，一旦设置固定宽度，就会失去自适应效果，变成固定布局。
这种布局方式无需计算两列宽度，不用考虑间距导致的换行问题，写法更简单，灵活性更强，适配性更好，新手掌握固定布局之后，优先学习这种自适应布局，正式网站开发使用率极高。
四、两列布局常见问题与解决方法
两列布局是新手最容易出现问题的布局，大部分问题都是宽度计算错误、浮动设置错误、浮动未清除导致的，常见的四个问题，都有固定的解决方法，遇到问题直接对照排查
第一个常见问题：右侧模块掉到左侧下方，出现换行错位。核心原因是两列总宽度超出父级容器宽度，左侧宽度+右侧宽度+左右内边距+左右边框+两列间距，大于父级总宽度，宽度不够容纳，自然换行。解决方法是重新计算宽度，减少子级DIV的宽度、内边距、边框尺寸，保证总宽度小于父级宽度
第二个常见问题：父级容器背景色不显示，高度为0。核心原因是未清除浮动，子级都设置了浮动，父级高度塌陷。解决方法是给父级容器添加通用清除浮动样式，触发父级自适应高度，即可正常显示
第三个常见问题：两列模块之间间距错乱，无法控制。核心原因是混用margin外边距和padding内边距，或者未计算间距宽度。规范写法是两列之间的间距，只给左侧DIV设置margin-right，不要同时给左右都设置外边距，避免间距合并
第四个常见问题：右侧内容被左侧侧边栏遮挡，文字环绕侧边栏。核心原因是右侧未设置overflow:hidden;，触发了浮动环绕特性。解决方法是给右侧自适应区域添加overflow:hidden;，彻底避开左侧浮动元素，解决遮挡和环绕问题
