CSS 浮动布局详解
一、常见布局方式概览
网页设计中常用的布局方案包括：
- 文档流布局（默认布局）
- 盒模型布局
- 浮动布局（float）
- 定位布局（position）
- 弹性盒子布局（flex）
- 响应式/流式布局
浮动布局曾是多列排版的主要解决方案。
二、浮动基础概念
浮动是一种使元素脱离文档流的布局方式，元素会沿父容器左侧或右侧浮动。
语法：
float: none | left | right;属性值说明：
none：默认值，不浮动left：左浮动right：右浮动
浮动元素会脱离文档流但不超出父容器范围。
三、浮动特性（核心要点）
脱离文档流
浮动元素不再占据原位置，后续元素自动上移受父容器限制
浮动范围不超过父级边界文字环绕效果
文字自动避让浮动元素浮动元素排列规则
后浮动元素紧贴前浮动元素与普通块级元素关系
上方有未浮动块级元素时，浮动元素无法上移
四、浮动核心用途
浮动主要用于实现水平排列效果。默认文档流中块级元素垂直排列，通过浮动可改为水平排列：
.box1, .box2, .box3 { float: left; }五、应用实例
示例1：基础浮动布局
<div id="box"> <div class="box1 box"></div> <div class="box2 box"></div> <div class="box3 box"></div> </div>.box { width: 100px; height: 100px; float: left; margin-right: 10px; } /* 颜色定义省略 */效果：三个方块水平排列
示例2：导航栏实现
<ul class="nav"> <li><a href="#">HTML/CSS</a></li> <!-- 其他导航项 --> </ul>.nav { width: 1210px; background-color: #e8e7e4; margin: 100px auto; } .nav > li { float: left; padding: 0 46.5px; } /* 悬停效果省略 */效果：创建水平导航菜单
示例3：三栏布局
<header class="w"></header> <main class="w"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </main> <footer class="w"></footer>.w { width: 1000px; margin: 0 auto; } .left { width: 200px; float: left; } .center { width: 580px; margin: 0 10px; float: left; } .right { width: 200px; float: left; }效果：实现经典三栏页面布局
六、要点总结
| 特性 | 说明 |
|---|---|
| 脱离文档流 | 不占原位置 |
| 文字环绕 | 自动避让 |
| 水平排列 | 多列布局基础 |
| 父容器限制 | 不超出边界 |
| 块级元素影响 | 上方未浮动元素会阻挡 |
核心价值：
浮动使块元素具备水平排列能力，是传统网页布局的关键技术。虽然现代布局多用flex/grid方案，但理解浮动原理对掌握CSS布局体系至关重要。
