浮动布局仍值得学，因老项目、邮件模板、CMS后台仍在用，且是理解CSS定位逻辑的必经关卡；本质是让元素脱离文档流但文本绕排，清除浮动推荐::after伪元素，多栏布局需注意宽度精度与box-sizing，混用Flex/Grid时float会失效。
浮动布局为什么现在还值得学
因为老项目、邮件模板、某些CMS后台仍在用，而且理解浮动是搞懂CSS定位逻辑的必经关卡。它不是“过时就该删”，而是“用对场景才有效”。
常见错误现象：父容器高度塌陷、文字环绕错乱、最后一行浮动元素换行异常
- 浮动本质是让元素脱离文档流，但文本和行内内容仍会绕排——这不是bug，是设计行为
-
float: left和float: right不能同时生效于同一元素；float: none是清除的起点，不是默认值 - IE6/7 对
display: inline-block支持差，当时靠浮动+zoom: 1触发hasLayout，现在基本不用了
清除浮动的三种写法怎么选
关键不是“哪个最炫”，而是“哪个最可控、最不污染结构”。
使用场景：父容器需要包裹所有浮动子项，且不能依赖JS计算高度
立即学习“前端免费学习笔记（深入）”；
-
::after伪元素（推荐）：干净、语义清晰，兼容到IE8+.clearfix::after { content: ""; display: table; clear: both; } -
overflow: hidden：简单粗暴，但会裁剪position: absolute越界内容、隐藏阴影或滚动条 -
clear: both单独加空标签：HTML侵入性强，维护成本高，仅限临时调试
多栏浮动布局的实际参数控制
真正决定栏数和响应性的，从来不是float本身，而是宽度、盒模型和容器约束。
性能影响：浮动本身无渲染开销，但频繁触发重排（如动态增删浮动项）会影响性能
- 固定栏宽用
px，等分布局优先用%，但注意border/padding会让总宽超100%——必须设box-sizing: border-box - 两栏左主右侧：主栏
float: left; width: 70%，侧栏float: right; width: 30%，顺序无关，但DOM顺序影响可访问性 - 三栏等宽：每栏
width: 33.333%+float: left，但小数精度可能导致最后一栏掉行——加margin-right: -1px或改用calc(33.333% - 2px)
浮动与Flex/Grid共存时容易被忽略的冲突点
不是“用了新布局就彻底告别浮动”，而是“混用时谁在文档流里、谁在流外”这个边界常被误判。
典型错误：flex container里的子项又设float，结果float失效（Flex项自动变成float: none）
- 浮动元素无法参与Grid轨道分配，Grid容器内设
float等于没写 - 浮动元素作为Flex项目的子元素可以正常绕排文字，但父Flex项的高度不会包含它——得靠
align-items: flex-start或额外清除 - 媒体查询中切换
float到flex时，记得同步清理clear和width，否则旧样式残留导致错位
浮动不是布局终点，而是理解“脱离流”与“重排触发”的第一课。真正麻烦的从来不是怎么让它浮起来，而是什么时候该让它沉回去。
