浮动元素的width不是设置值，因其受父容器、内容、box-sizing和BFC影响；width仅为建议值，浏览器可能为适应未换行内容或窄容器而忽略它。
浮动元素的宽度为什么不是设置值？
浮动元素的 width 计算会受父容器、内容、box-sizing 和是否触发 BFC 影响。最常见的情况是：设了 width: 200px，但实际占位远超这个数——往往因为内部有未换行的长单词、图片没设 max-width，或父容器太窄导致浮动“撑开”。
关键点：
-
float元素默认由内容决定最小宽度，width只是“建议值”，浏览器可能忽略它去适应内容 - 若子元素含
white-space: nowrap或长 URL，浮动容器会强行扩展，不遵守width -
box-sizing: border-box必须显式写，否则padding和border会额外加在width外 - 没有触发 BFC 的父容器，对浮动子元素的
width约束力极弱
清除浮动后父容器高度塌陷还发生吗？
清除浮动（比如用 clear: both）本身不解决父容器高度塌陷，它只让后续元素避开浮动区域；真正修复塌陷的是让父容器形成 BFC 或主动撑高。
典型误区：
- 在浮动元素后面加一个
<div style="clear: both"></div>—— 这只是把“下一行”拉下来，父容器依然不知道浮动子元素的存在 - 用
overflow: hidden清除浮动，但同时裁剪了position: absolute子元素或阴影溢出 -
display: flow-root是目前最干净的解法，但 IE 完全不支持
推荐顺序：display: flow-root → overflow: hidden（确认无溢出需求）→ 伪元素清除（兼容旧项目）
伪元素清除浮动的写法和坑
主流方案是用 ::after 生成清除节点，但细节错一点就失效。
必须满足这四点：
- 父容器需设置
zoom: 1（IE6/7）或hasLayout触发方式 -
::after必须有content: ""，空字符串也不行，content: " "都可能因空白处理异常 -
display: table比block更稳妥，能避免某些 margin 合并干扰 - 不能给
::after设height或line-height，否则可能在 Firefox 下多出空白
最小可用代码：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 */
}
Flex/Grid 布局里还要管浮动清除吗？
不用。一旦父容器设了 display: flex 或 display: grid，子元素即使写了 float 也会被忽略——规范明确要求浮动在 Flex/Grid 容器中无效。
但要注意：
- 嵌套场景：父是 Flex，子是普通块，子再浮动——这时浮动仍生效，且会影响子内部布局
- 用
float做文字环绕（float: left+ 段落）时，在 Flex 容器里照样工作，但父容器高度不会自动包含它 - 过渡期项目混用浮动和 Flex，容易出现“看起来正常，但打印或缩放时错位”的问题
浮动现在基本只用于文字环绕或极老系统兼容，其他布局场景硬上浮动，等于自己埋坑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
