父容器高度塌陷是因为浮动元素脱离文档流，导致父容器按“空盒子”计算高度，背景/边框因而不可见；需用clearfix伪元素（content:"" + display:table + clear:both）或display:flow-root触发bfc来修复，且clear:both必须写在浮动元素之后的块级兄弟元素上。
用 float 做多栏布局不是错，但必须同步处理高度塌陷和响应式断裂——否则页面会在 iOS Safari 里抖动、在安卓 WebView 中裁剪内容、在窄屏上叠在一起。
为什么父容器高度塌陷，且背景/边框不显示
浮动元素脱离标准文档流，但父容器仍按“空盒子”计算高度。视觉上子元素排好了，DOM 里却像没它们一样。
-
overflow: hidden能触发 BFC，强制包含浮动子项，但某些安卓 WebView 会意外裁剪溢出内容 -
:after伪元素清除（即.clearfix::after）更稳妥，需配content: ""+display: table或clear: both - 别给父容器自己设
float，它也会脱离文档流，问题下移一层
clear: both 写在哪才生效
clear: both 不是“清父容器”，而是让**当前元素避开前面所有浮动元素**。它只对后续兄弟元素起作用，且必须紧跟在最后一个浮动元素之后。
- 写在浮动元素自身上：
<div style="float:left; clear:both"></div>→ 无效，不撑父容器 - 写在父容器上：
<div style="clear:both"><div style="float:left"></div></div>→ 无效，clear不作用于子元素 - 正确写法：
<div style="float:left"></div> <div style="clear:both"></div>，且后者必须是直接后续兄弟 - 为防空标签带来额外高度，建议加
height: 0; font-size: 0; overflow: hidden
响应式切换时 float + width 必须成对重置
媒体查询里只改 float: none 而不调 width 和 clear，移动端大概率叠在一起——尤其当原始宽度是百分比或固定值混用时。
- 错误写法：
@media (max-width: 600px) { .sidebar, .main { float: none; } } - 正确补丁：
@media (max-width: 600px) { .sidebar, .main { float: none; width: 100%; clear: both; } } - 若用
overflow: hidden清除，记得在媒体查询里也显式重置，避免旧规则残留 - IE8–9 兼容需加
zoom: 1，否则伪元素清除可能失效
float 布局的替代方案何时该换
如果项目要支持 flex 或 grid，且无需兼容 IE9 及以下，float 就该退场了——不是因为它不能用，而是它会让 margin 合并失效、vertical-align 失效、嵌套 flex 子项直接崩溃。
- 两栏自适应：用
display: flex+flex: 0 0 75%比反复算width: 75%更稳 - 等宽多栏：
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))自动响应，无须clear - 图文环绕场景（唯一推荐保留
float的地方）：文字绕图仍靠float: left，此时不需要清除，也不需要撑容器
真正麻烦的从来不是怎么写 float，而是改完之后忘了在窄屏下重置 width，或者把 clear 加在了伪元素里却漏了 content: ""——这两个点，90% 的翻车都发生在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
