浮动塌陷致错位的根本原因是浮动元素脱离文档流使剩余空间破碎；应触发父容器BFC（如overflow:hidden或display:flow-root），而非硬设高度；现代布局优先用Flex/Grid，仅图文绕排等场景保留float。
浮动元素高度不一致导致后续内容错位
这是经典浮动塌陷的变种：父容器没包住，下面的元素被卡在某个浮动元素的“半腰”位置。根本原因不是浮动本身出错，而是浮动脱离文档流后，其他元素只按剩余空间布局，而高度参差的浮动块会让这个“剩余空间”变得破碎。
常见错误现象：clear: both 加了也不管用、父容器高度为 0、文字或按钮突然跑到两列中间“悬空”、响应式断点后错位更严重。
- 别给每个浮动元素硬设
height或min-height——内容长度不可控，设死会截断或留白，维护成本高 - 真要用浮动，必须触发父容器 BFC，最稳的是
overflow: hidden（或auto），不是靠子元素自己清浮动 - 如果父容器已有
overflow: visible且不能改（比如要显示阴影或下拉菜单），改用display: flow-root，它专为此设计，无副作用
为什么现在不推荐靠 float 做多栏布局
因为浮动本意是让文字环绕图片，不是做栅格系统。CSS Grid 和 Flexbox 出来后，float 在布局场景里只剩兼容老项目的价值。
使用场景已大幅收缩：仅用于图文混排中的图片左/右绕排，或极老浏览器（IE8 及以下）必须支撑的后台系统。
立即学习“前端免费学习笔记（深入）”；
-
float无法对齐基线，多行文本+图标时上下总差几像素 - 响应式重排需配合大量
media query+clear，比flex-wrap复杂得多 - Flex 容器内子项默认 stretch，高度自动拉平；Grid 可用
align-items: stretch一键对齐，浮动做不到
用 display: flex 替代浮动时的关键配置
不是把 float: left 删掉再加 display: flex 就完事。主轴方向、换行、对齐方式全得重想。
典型错误：加了 display: flex 后所有子项挤成一行，溢出容器，或者高度还是不一致。
- 横向多栏用
flex-direction: row（默认值），但必须加flex-wrap: wrap才能折行 - 让子项等高：父容器设
align-items: stretch（默认），子项别设height或flex-shrink: 0 - 子项宽度控制优先用
flex: 1或flex: 0 0 300px，别依赖width—— Flex 下width仅作初始参考 - 旧代码里
margin-right: -9999px配合padding-right: 9999px的“负边距技巧”，Flex 中直接删掉
IE10+ 能用 flex，但要注意这些兼容写法
不是所有 Flex 属性都能直写。比如 flex: 1 在 IE10-11 需展开为 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，否则表现异常。
性能影响很小，但漏写前缀或误用属性会导致整行失效，比浮动更“静默崩溃”。
- 必须加
display: -ms-flexbox（IE10）和display: flex（现代）双声明 -
flex-wrap在 IE10 不支持，只能靠 JS 检测后降级为单列，或改用 CSS Grid（IE10+ 也支持display: -ms-grid） - 慎用
align-content：IE10-11 对它的实现有偏差，多行 Flex 容器中建议用justify-content+gap替代
