CSS浮动问题导致文档流紊乱，新手常犯的前五项错误有哪些？

本文共计972个文字，预计阅读时间需要4分钟。

这是最典型的锁定响应：

常见错误现象：div 包着几个 float: left 的 img 或 aside，但整个盒子在开发者工具里显示高度为 0，背景色/边框全没了。

• 别用 height 硬撑——响应式下必破
• 优先加 overflow: hidden 或 overflow: auto 到父容器（兼容性好，IE6+ 都行）
• 现代项目可改用 display: flow-root（Chrome 64+/Firefox 58+），语义更准，且不影响溢出行为
• 避免用 clear: both 空标签——多一个 DOM 节点，维护成本高

文字环绕浮动元素时换行错乱

浮动本意是让文字绕排，但一旦后续块级元素没处理好清除，文字就会继续缠着前面的浮动块，跑到不该出现的位置去。

使用场景：图文混排的新闻卡片、博客侧栏 + 主内容布局。