CSS浮动带来的文档流混乱_初学者最易犯的五个错误

浮动元素导致父容器高度塌陷，需用overflow:hidden或display:flow-root清除；文字环绕时需正确使用clear；z-index对float无效，须配合position使用；现代布局应优先选用Flex/Grid。 浮动元素导致父容器高度塌陷 这是最典型的连锁反应：只要子元素用了 ，父容器就可能“看不见”它，高度变成 0，后面的内容直接往上顶。不是 CSS 失效，是文档流真的被绕开了。 常见错误现象： 包着几个 的 或 ，但整个盒子在开发者工具里显示高度为 0，背景色/边框全没了。 别用 硬撑——响应式下必破 优先加 或 到父容器（兼容性好，IE6+ 都行） 现代项目可改用 （Chrome 64+/Firefox 58+），语义更准，且不影响溢出行为 避免用 空标签——多一个 DOM 节点，维护成本高 文字环绕浮动元素时换行错乱 浮动本意是让文字绕排，但一旦后续块级元素没处理好清除，文字就会继续缠着前面的浮动块，跑到不该出现的位置去。 使用场景：图文混排的新闻卡片、博客侧栏 + 主内容布局。 立即学习 “ 前端免费学习笔记（深入） ”； / 必须加在需要“重开一行”的元素上，不是浮动元素自己 如果文字和浮动块都属于同一段落（比如 里有 浮动）， 没用——得靠 或调整 HTML 结构 注意 和 对内联浮动的影响，尤其图片嵌在文本中时容易上下偏移 浮动元素脱离文档流后 z-index 失效 只在定位上下文（ 不为 ）中生效；而 不创建新的层叠上下文，也不改变 值。结果就是：你设了 ，但它依然被后面普通 盖住。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 性能影响：强行用 + 补救，反而可能触发额外图层合成，低端设备卡顿。 真正要控制层级，先加 （或 ），再设 浮动本身不解决层叠问题，别把它当定位方案用 多个浮动元素堆叠时，DOM 顺序决定默认层叠顺序， 完全不起作用 Flex/Grid 时代还硬套 float 布局 现在写两栏、三栏、圣杯、双飞翼，用 或 几行代码搞定，而 还得算 、防塌陷、清浮动、调 ……纯属给自己加戏。 兼容性影响：IE10+ 支持 Flex，IE11+ 支持 Grid（带 前缀），比死磕 兼容方案更可控。 除非要支持 IE9 及以下，否则别为布局写 真正该用的地方只剩：文字环绕图片、极简兼容兜底、CSS 动画中模拟位移（但已有 更优） 检查现有项目：搜索 ，重点看是否出现在布局类 class（如 ）里——大概率该重构 浮动不是 bug，是特定历史阶段的解法。问题不在它本身，而在用错场景、不清除副作用、不更新技术选型。真正麻烦的从来不是怎么清浮动，而是发现页面某处莫名错位后，要花十分钟确认是不是某个祖传 漏写了 。