浮动导致父容器高度塌陷，使子元素百分比宽度计算失效；应优先用flex布局替代浮动，或用::after伪元素清除浮动来撑开父高。
浮动元素导致父容器高度塌陷，子元素百分比宽度失效
这是最常触发该问题的场景：父容器没设高度，里面几个 float: left 的子块用 width: 50% 想并排，结果错位、换行、甚至溢出。根本原因是浮动元素脱离文档流，父容器“看不见”它们，高度塌成 0，子元素的百分比宽度就按这个 0 去算——自然全乱套。
- 别指望靠给父容器硬写
height解决，响应式下不现实 -
overflow: hidden能触发 BFC 清除浮动，但会意外裁剪position: absolute或box-shadow溢出内容 - 现代项目优先用
display: flex替代浮动布局，一劳永逸避开这类计算陷阱
clear:both 不是万能解，它只影响后续元素位置
clear: both 放在浮动元素后面，只是让那个元素“下移”，不等于修复父容器高度或重算子元素宽度。很多人加了 就以为完事，结果子元素还是按塌陷后的父宽算百分比，问题照旧。
-
clear只作用于自身，对父容器尺寸无任何影响 - 如果父容器本身有边框或背景色，你会一眼看出它根本没包住浮动子项
- 这种写法在嵌套浮动结构里极易漏掉某一层的清除，调试成本高
伪元素清除法（::after）为什么更可靠
用 ::after 在父容器末尾插入一个清除浮动的“幽灵元素”，既不污染 HTML 结构，又能真正撑开父容器高度，让百分比宽度有据可依。
.container::after {
content: "";
display: table;
clear: both;
}
- 必须设
content: ""，否则伪元素不渲染 -
display: table比block更稳妥，避免 IE6/7 下的 margin 双倍问题 - 若父容器已设
display: flex或grid，伪元素清除自动失效——此时浮动本就不该存在
Flex 布局下浮动和百分比宽度的关系彻底改变
一旦父容器用了 display: flex，子元素的 float 属性直接失效（规范明确忽略），width: 50% 也不再相对于父容器宽度，而是受 flex-basis 和剩余空间分配规则控制。
- 想等分两列？直接写
flex: 1，别碰width: 50% - 混合使用浮动和 Flex 会导致不可预测行为，浏览器可能静默忽略部分样式
- 老项目迁移时，要检查所有带
float的地方是否还依赖百分比宽度逻辑
浮动不是“清掉就完了”的小毛病，它会让宽度计算链条从父容器开始断裂。真正要盯住的，是那个看不见高度的父容器——它才是百分比失效的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
