浮动元素脱离文档流导致父容器高度为0、背景色消失，应优先用display: flow-root修复；clear: both仅对前一个浮动兄弟元素生效；盒模型超宽或flex/grid中误用float也会引发错位。
浮动元素没撑开父容器，背景色消失怎么办
这是最常遇到的“看不见的塌陷”：父容器 .container 加了 background-color，但只显示一条细线，或者完全空白。根本不是样式没生效，而是它高度为 0——因为所有子元素都设了 float: left 或 float: right，脱离文档流后，父容器就“失联”了。
实操建议：
- 优先加
display: flow-root到父容器，一行解决，不裁剪position: absolute下拉菜单、box-shadow、transform位移内容 - 若需兼容 IE11，改用伪元素：
.clearfix::after { content: ""; display: block; clear: both; }，注意content: ""和display: block缺一不可 - 别用
overflow: hidden当默认方案——它确实能触发 BFC，但会意外裁掉溢出部分，调试时容易漏掉这个副作用 - 临时加
border: 1px solid red到父容器，一眼确认它是否真的“缩成一条线”
写了 clear: both 却没起作用，怎么定位
clear: both 不是魔法开关，它只对“紧挨着它的前一个浮动兄弟元素”生效。常见失效场景：该元素自己也设了 float、被 display: none 隐藏但样式还在、或和浮动元素不在同一个 BFC 内。
实操建议：
- 确认目标元素是块级（比如
div、p），且没设float—— 自己浮动的元素无法被clear - 检查它是否在浮动元素之后、同一层级；如果中间隔着
flex容器或grid容器，clear就失效了 - 给它加
background: yellow和height: 20px，确认它是否渲染出来、有没有被其他样式压制 - 用浏览器开发者工具“Computed”面板查
clear是否被覆盖，尤其注意all: unset或重置 CSS 的影响
左右浮动元素错位、掉行，宽度算不准
两个 float: left 元素本该并排，结果一个掉到下一行？大概率不是清除问题，而是盒模型总宽超限——哪怕只多出 1px，浏览器就会换行。
实操建议：
- 统一写
box-sizing: border-box，否则width: 50%+padding: 10px实际占满 50% + 20px - 浮动元素之间不要留 HTML 空格或换行符；或给父容器设
font-size: 0，子元素再单独设字体大小 - 避免用
margin-left分隔左浮动项（IE6 双倍边距），改用margin-right - 响应式断点下慎用
width: 99.9%这类临界值——缩放或小数像素四舍五入会导致突然换行
Flex/Grid 容器里还写 float，为什么不起作用
一旦父容器设了 display: flex 或 display: grid，子元素的 float 属性会被完全忽略。这不是 bug，是规范行为：Flex/Grid 是独立布局上下文，浮动只在块级格式化上下文中有效。
实操建议：
- 看到
display: flex和float: left同时存在，基本可判定是历史残留代码，直接删掉float - 想实现类似效果，用
justify-content: space-between或margin-left: auto控制右侧对齐，比 float 更可控 - 调试时打开开发者工具的 Layout 面板，看元素是否显示 “Flex item” 或 “Grid item”，如果是，
float栏就灰掉了
float 大概率只该出现在图文环绕这种特定场景；其余时候，它只是个需要被识别并移除的信号。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
