float使元素脱离文档流实现图文环绕，text-align控制内联内容对齐；两者结合可实现混合布局：普通图片通过float: left形成多列，特殊图片取消浮动并由text-align: center居中显示，从而在同容器中达成不同对齐效果。
在网页布局中，使用CSS的float属性配合text-align可以实现灵活的图片对齐效果。虽然两者作用机制不同，但合理结合能有效控制图片在容器中的位置。
float的作用：脱离文档流实现图文环绕
float让元素脱离正常文档流，向左或向右浮动，常用于实现文字环绕图片的效果。
常见用法：例如：
img {
float: left;
margin-right: 10px;
}这段代码会让图片左对齐，文本从右侧开始排列。
立即学习“前端免费学习笔记（深入）”；
text-align的作用：控制内联内容的水平对齐
text-align作用于块级元素内部，控制其内联内容（如文本、图片）的水平对齐方式。
典型值包括：
-
text-align: center;— 居中对齐 -
text-align: right;— 右对齐 -
text-align: justify;— 两端对齐
注意：text-align对float元素本身无效，因为浮动元素已脱离文本流。但它会影响未浮动的图片或设置为display: inline-block的图片。
float与text-align的结合使用场景
当需要在不同屏幕尺寸或状态下切换对齐方式时，两者可配合使用。
- 小图列表中，多数图片用
float: left实现多列布局 - 某个特殊图片不设浮动，通过
text-align: center居中显示 - 父容器通过
text-align统一控制非浮动内联元素的对齐
示例：混合对齐布局
.gallery {
text-align: center; /* 非浮动图片居中 */
}
<p>.gallery img {
width: 200px;
margin: 5px;
}</p><p>.gallery .featured {
float: none; /<em> 取消浮动，使其受text-align影响 </em>/
}</p><p>.gallery .normal {
float: left; /<em> 普通图片左浮动 </em>/
}这样，普通图片会靠左排列形成网格，而标记为featured的大图则在容器中居中显示。
基本上就这些。关键是理解float让元素“漂走”，而text-align只管“留下的文本内容”。搭配得当，就能实现复杂的图文混排效果。
