浮动元素导致父容器塌陷时，应触发BFC：用overflow:hidden/auto或display:flow-root；避免空div清浮动、固定高或混用flex。需注意box-sizing、IE兼容及适用边界。
float 左右浮动后元素塌陷怎么办
浮动元素会脱离文档流，父容器高度塌陷是第一个必须处理的问题。不加清理，后续内容会顶上来，布局直接错乱。
最直接的解法是给父容器加 overflow: hidden 或 overflow: auto —— 它会触发 BFC，自动包裹浮动子元素。别用 height: 100% 或固定高，那只是掩耳盗铃。
- 避免用
clear: both在末尾硬加空 div，语义差、维护成本高 -
display: flow-root是现代替代方案（Chrome 64+、Firefox 62+），但老项目 IE11 不支持 - 如果父容器本身有边框或背景色，塌陷会导致视觉上“消失”，这是最常被忽略的线索
左右两列宽度加起来超 100% 就错位
浮动对盒模型极其敏感：padding、border、margin 全都会撑开实际占用宽度。比如两个 width: 50% 的 div，只要任一列有 padding: 10px，就会换行。
务必统一用 box-sizing: border-box，让 width 包含 padding 和 border：
.left, .right { box-sizing: border-box; }
- 左列用
float: left，右列用float: right，别都用left然后靠 margin 撑开，容易在小屏下错位 - 如果右列内容少、高度低，左列长文本会绕到右列下方——这不是 bug，是 float 的天然行为；需要等高就得用其他方案（如 flex）
- 移动端慎用 float 布局，viewport 缩放或横竖屏切换时，微小宽度偏差就可能触发换行
IE8 及以下对 float 的解析差异
IE8 支持 float，但对 display: inline-block 和 zoom: 1 的触发逻辑更苛刻，经常出现“浮动元素不显示”或“文字被截断”。
兼容写法要多加一层保险：
.left { float: left; *display: inline; *zoom: 1; }
-
*display: inline和*zoom: 1是 IE6–7 的 hack，IE8+ 会忽略，但能防止旧版双倍 margin bug - IE8 不支持
calc()，所以别写width: calc(50% - 10px)配合 float，它会直接当无效值处理 - 如果项目必须支持 IE8，就别指望用 float 做响应式；媒体查询 + float 组合在 IE8 下基本不可靠
float 布局和 flex 布局混用会冲突
一旦父容器设了 display: flex，里面所有 float 属性都会失效——CSS 规范明确写了：浮动在 flex 容器中无意义。
常见翻车场景：在某个组件里用了 flex 做整体结构，又想在子区域用 float 排两栏，结果完全不生效。
- 检查父级是否意外继承了
display: flex（比如通过 CSS 框架的 utility class） - 不要为了“快速”硬套 float，如果容器已经是 flex 或 grid，老老实实用
flex: 1或grid-column - float 的“快速”只存在于纯静态、无交互、无响应需求的场景；稍有复杂度，它反而比 flex 多出三倍调试时间
浮动不是过时，是适用边界特别清晰：纯内容流、无交互、不需等高、不需响应、目标浏览器明确。一旦其中一条不满足，花十分钟切到 flex，比修两个小时 float 塌陷和错位划算得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
