如何选择和运用CSS清除浮动与Flexbox布局以实现更优的网页布局效果？

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

由于 `float` 本身不是页面布局设计的，它只是文字环绕图片服务；当开发者用 `float` 做多列布局时，才被引入 `clear`、`::after` 等样式处理。

常见错误现象包括：

• 父容器高度塌陷，背景/边框不显示
• clear: both 放错位置导致布局错位
• overflow: hidden 意外裁剪子元素的 position: absolute 内容

如果你还在用 float 布局，优先考虑替换——除非要兼容 IE8 及更早版本。