浮动布局易导致父容器高度塌陷和对齐困难，可通过text-align配合inline-block或伪元素清除浮动实现居中与对齐，但结构复杂且局限；现代方案推荐使用flex布局，通过display: flex和justify-content等属性轻松实现精准对齐与响应式分布，代码简洁且功能强大，建议优先采用flex替代float用于整体布局。
浮动元素默认脱离文档流，导致父容器无法正确感知其高度，同时水平对齐也容易失控。直接使用 float 实现多列布局时，若想让子元素居中或均匀分布，仅靠浮动本身很难实现理想效果。解决这类问题，可以借助 text-align 或更现代的 flex 布局 来辅助对齐。
使用 text-align 控制内联级浮动容器对齐
当浮动元素的父容器被设置为 text-align: center 时，虽然浮动元素本身不会像内联元素那样居中，但可以通过一些技巧间接实现居中效果：
text-align: center• 再给浮动元素外层包裹一个
display: inline-block 的容器• 对该容器应用浮动和宽度，使其在文本居中环境下“表现”为居中
这种方式适用于简单居中场景，但结构略显繁琐，且仍受限于浮动的局限性。
用 Flex 布局替代浮动实现精准对齐
现代布局推荐使用 Flex，它能彻底摆脱浮动带来的对齐和高度塌陷问题：
立即学习“前端免费学习笔记（深入）”；
• 父容器设置display: flex• 使用
justify-content 控制主轴对齐方式（如 center、space-between）• 子元素无需设置
float，自动沿主轴排列例如，实现三列等宽、两端对齐的布局：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 0 0 30%; /* 不伸展、不收缩、基础宽度30% */
}
Flex 布局不仅代码简洁，还支持垂直对齐、响应式伸缩等高级功能。
过渡方案：清除浮动并结合文本对齐
在不能完全放弃浮动的旧项目中，可结合 text-align 和伪元素清除浮动来改善对齐：
text-align: center• 子元素设置
float: left 并限定宽度• 使用
::after 清除浮动避免高度塌陷但此法仍不如 Flex 灵活，仅作为兼容性过渡手段。
基本上就这些。如果追求稳定和易维护，建议尽早用 Flex 替代浮动布局。对齐问题在 Flex 面前变得非常简单，不再需要各种 hack 手段。浮动更适合文字环绕等传统排版场景，而非整体布局。
