答案：处理CSS浮动中文本对齐需清除浮动、触发BFC解决塌陷、设置text-align对齐文本，推荐用Flex布局替代。
当使用CSS浮动（float）布局时，文本与浮动元素之间的对齐常常会出现意料之外的情况。比如文字环绕、垂直不对齐、容器高度塌陷等问题。下面介绍几种常见的处理方式，帮助你更好地控制浮动元素中的文本对齐。
1. 清除浮动以防止文本环绕
浮动元素会脱离正常文档流，导致周围的文本环绕在其周围。如果你希望某段文本不环绕浮动元素，可以使用 clear 属性。
常见用法：- clear: left; — 清除左侧浮动
- clear: right; — 清除右侧浮动
- clear: both; — 清除左右两侧浮动
例如：
.left-float {
float: left;
}
.clear-float {
clear: both;
}
在需要停止环绕的元素上添加 clear: both;，即可让该元素从新的一行开始，不再受浮动影响。
立即学习“前端免费学习笔记（深入）”；
2. 使用 overflow 触发 BFC 解决高度塌陷
父容器如果只包含浮动元素，通常会发生高度塌陷（即父容器高度为0），导致内部文本位置异常。可以通过触发BFC（块级格式化上下文）来包含浮动。
常用方法：- 设置父容器 overflow: hidden;
- 或使用 display: flow-root;（现代推荐）
示例：
.container {
overflow: hidden; /* 包含子浮动元素 */
}
/* 或更现代的方式 */
.container {
display: flow-root;
}
这样父容器就能正确包裹浮动元素，文本布局也会更稳定。
3. 浮动项内的文本对齐控制
对于浮动盒子内部的文本对齐，使用标准的 text-align 属性即可。
- text-align: left; — 文本左对齐（默认）
- text-align: center; — 居中对齐
- text-align: right; — 右对齐
例如：
.float-box {
float: left;
width: 200px;
text-align: center; /* 内部文本居中 */
}
4. 替代方案：使用 Flex 布局更简单
浮动原本用于实现多列布局，但现在更推荐使用 Flex 或 Grid 布局，避免浮动带来的复杂问题。
用 Flex 实现类似效果：
.flex-container {
display: flex;
align-items: center; /* 垂直居中文本 */
}
.item {
margin-right: 10px;
}
这种方式天然包含子元素，不会出现高度塌陷，文本对齐也更容易控制。
基本上就这些。虽然浮动还在用，但处理文本对齐时要注意清除浮动、包含浮动以及合理设置文本对齐方式。现代布局建议优先考虑 Flex，更简洁可控。
