传统浮动两栏布局CSS代码整理笔记
一、代码整体功能
本代码是一个经典传统浮动两栏网页布局的基础初始化样式，实现了通栏顶部导航 + 左+右分栏的结构，是CSS入门学习浮动布局的典型案例。
二、逐段代码知识点解析
- 全局通配符初始化样式
css* {
margin: 0;
padding: 0;
}
这是CSS开发中最常用的初始化代码：
1. 作用：清除所有浏览器自带的默认内外边距，不同浏览器默认元素边距不同，统一重置后可以让布局在所有浏览器表现一致。
2. 知识点：*是CSS通配选择器，会选中页面所有HTML元素，统一设置样式。
2. 顶部通栏 .top 样式
css.top {
margin: 0 auto;
width: 1200px;
height: 24px;
background-color: #4472C4;
}
该样式用于页面最顶部的通栏导航：
1. margin: 0 auto：让固定宽度的块级元素在页面水平居中，是居中布局最常用写法，上下外边距为0，左右自动分配间距实现居中
2. width: 1200px：该案例使用了网页开发中经典的1200px定宽版心，适配当年主流显示器宽度
3. height: 24px：设置顶栏高度为24像素，符合导航栏的高度需求
4. background-color: #4472C4：设置顶栏背景为蓝色，区分页面其他区块
3. 左栏 .left 样式
css.left {
float: left;
width: 87px;
height: 672px;
background-color: red;
}
该样式用于布局左侧侧边栏：
1. float: left：核心浮动属性，让元素脱离普通文档流，向左浮动，实现和右侧元素同排排列，是传统两栏布局的核心
2. width: 87px：左侧侧边栏固定宽度87像素
3. height: 672px：设置侧边栏高度为672像素
4. background-color: red：设置红色背景用于区分区块，开发调试阶段可以快速看到布局范围
4. 右栏 .right 样式
css.right {
float: left;
height: 672px;
width: 1113px;
background-color: gray;
}
该样式用于布局右侧内容区：
1. float: left：同样设置左浮动，和左侧侧边栏浮动到同一行，实现并排布局，注意：两个分栏都需要设置浮动才能同行排列
2. 宽度计算：总版心宽度1200px，左侧占用87px，1200px - 87px = 1113px，刚好撑满整行宽度，是定宽分栏的精准计算方式
3. height: 672px：和左侧侧边栏保持相同高度，实现等高两栏的效果
4. background-color: gray：灰色背景区分右侧内容区
三、整体布局尺寸校验
我们可以计算验证整体尺寸是否匹配：
区块 宽度 高度
顶部通栏 .top 1200px 24px
左侧边栏 .left 87px 672px
右侧内容 .right 1113px 672px
整体分栏总宽 87 + 1113 = 1200px 和顶栏宽度一致，对齐排版
四、核心知识点总结
1. 浮动布局原理：浮动可以让块级元素脱离标准流，实现同行并排，是传统CSS分栏布局的主流方案
2. 定宽版心：使用1200px定宽是早年PC端网页的主流设计，通过margin: 0 auto实现版心水平居中
3. 布局调试：给不同区块设置不同背景色，是前端开发调试布局快速找错的常用技巧
4. 注意事项：浮动布局会导致父元素高度塌陷，本案例手动给两个分栏设置了固定高度，实际开发完成后需要给父容器清除浮动。