浮动布局通过float属性实现元素左或右排列，常用于图文混排与多列布局；需用clear属性、BFC或伪元素清除浮动，防止父容器塌陷，虽被Flexbox和Grid取代，但在旧项目和特定场景仍具实用价值。
浮动布局（Float Layout）是CSS中一种传统的网页布局方式，主要用于实现文本环绕图片、多列内容排列等效果。虽然现代开发更多使用Flexbox和Grid布局，但理解浮动机制对维护旧项目或处理特定场景仍很有帮助。
1. 基本浮动用法
通过float属性可以让元素脱离正常文档流，并向左或向右“浮动”，其他内容会围绕它排列。
常用值包括：
- float: left; — 元素靠左浮动
- float: right; — 元素靠右浮动
- float: none; — 默认值，不浮动
例如，让图片右侧的文字环绕显示：
立即学习“前端免费学习笔记（深入）”；
img { float: left; margin-right: 10px; }2. 多列布局中的应用
浮动常用于创建多栏结构，比如两栏或三栏布局。
示例：左侧固定宽度导航，右侧为主内容区
南方数据企业网站管理系统11 bulid 080901 全屏修正版
下载
南方数据企业网站管理系统 V11.0全屏版新增功能:1.首页模板布局做了全新的调整;2.新增了企业网站广告管理系统,可以在后台随意增加和修改Banner广告、对联广告、浮动广告、弹出广告;3.新增了QQ在线资讯功能，同时还有N种模板选择;4.更换了网站统计管理系统；5.对菜单进行了加粗处理,显得更美观;6.后台使用了全新的静态编辑器,提高了后台打开编辑器的速度;7.新增了一个模板;8.修改了中英文
.main-content { float: right; width: calc(100% - 220px); }
这样两个区块会在同一行并排显示（前提是父容器足够宽）。
3. 清除浮动的影响
浮动元素会脱离文档流，可能导致父容器高度塌陷，后续元素错位。因此需要“清除浮动”。
常用方法有：
- 使用 clear 属性：在浮动元素后添加一个空元素并设置clear: both;
- 触发BFC（块级格式化上下文）：给父容器设置overflow: hidden;或overflow: auto;
- 使用伪元素清除法（推荐）：
.container { clearfix }
4. 实际应用场景
尽管已被更现代的布局取代，浮动仍在一些场景中实用：
- 图文混排：新闻、博客文章中图片与文字的自然环绕
- 简易网格：产品列表、相册等横向排列项（配合宽度控制）
- 兼容性要求高的老项目维护
基本上就这些。浮动不是最先进的方式，但在特定情况下依然有效。关键是掌握原理和清除技巧，避免布局混乱。
