浮动布局是CSS早期实现多列排版的核心技术，通过float使元素脱离文档流并左/右浮动，常用于两栏自适应、图文环绕及兼容性多列布局，需配合清除浮动避免父容器塌陷。
浮动布局（Float Layout）是 CSS 中早期实现多列排版的核心技术，虽然现在更推荐使用 Flexbox 或 Grid，但在维护老项目、理解页面流机制，或做兼容性处理时，掌握 float 依然很实用。它的核心在于让元素脱离标准文档流，向左或右“漂”起来，其他内容围绕它排列。
浮动的基本写法与清除浮动
给元素设置 float: left 或 float: right，它就会向对应方向靠边，并尽可能升高（直到碰到父容器边界或另一个浮动元素）。但副作用也很明显：父容器往往“塌陷”——高度变为 0，因为浮动元素已脱离文档流，不参与父级高度计算。
常见清除浮动方法：
- 在父容器末尾加一个空标签，如
<div style="clear:both"></div> - 给父容器设置 overflow: hidden（或 auto），触发 BFC，自动包含浮动子元素
- 使用伪元素清除（推荐）：
.clearfix::after { content: ""; display: table; clear: both; }
然后给父容器添加 class="clearfix"
两栏自适应布局（左定宽 + 右自适应）
这是浮动最经典的应用场景，比如左侧导航栏固定 200px，右侧主内容区自动填满剩余空间。
立即学习“前端免费学习笔记（深入）”；
HTML 结构示例：
<div class="container">
<div class="sidebar">导航</div>
<div class="main">文章内容</div>
</div>
CSS 关键部分：
-
.sidebar：设置
width: 200px; float: left; -
.main：不设宽度，仅加
overflow: hidden;（触发 BFC，自动避开浮动区，实现自适应） -
.container 建议加
clearfix类，防止高度塌陷
图文混排与文字环绕效果
新闻页、博客中常见的“图片左浮动，文字环绕右侧”的效果，正是 float 的天然优势。
示例写法：
- 给
<img>加float: left; margin-right: 12px; - 段落文本无需额外设置，会自动绕开浮动图片区域
- 若希望某一段不环绕（比如想另起一行），可给该段落加
clear: both;
注意：图片需有明确 width/height，否则可能因加载延迟导致布局抖动；建议配合 max-width: 100%; 做响应式适配。
多列等宽卡片布局（兼容低版本浏览器）
在不支持 Flex 的 IE9– 环境下，可用浮动实现三栏等宽卡片：
- 每张卡片设
width: 33.33%; float: left; - 为避免小数像素导致换行，可改用
width: calc(100% / 3);（IE9+ 支持） - 每行第 3 个卡片后加
clear: right;，或统一用 clearfix 包裹每行 - 卡片间留白建议用 padding 实现，而非 margin（避免外边距合并影响浮动对齐）
