加了float:right却没动，是因为未设置width导致块级元素仍占满父容器；必须显式设width（如30%或200px）才能缩窄右浮，否则虽脱离文档流但视觉“卡死”，且父容器会高度塌陷。
直接加 float: right 就能实现，但必须配 width，否则块级元素会撑满父容器、看起来像没浮动。
为什么加了 float: right 却没动？
常见错误是只写 float: right，没设宽度。块级元素默认 width: auto，浮动后仍试图占满可用空间，视觉上“卡死”在右边但没缩窄——实际已脱离文档流，只是被拉宽了。
- 必须显式设置
width（比如width: 200px或width: 30%） - 若父容器太窄，
float: right元素会换行到下一行最右端，不是溢出 - 浮动后元素的
margin和padding仍生效，但vertical-align无效
float: right 和 text-align: right 的区别
别混淆：后者只对**内联内容**（文字、span、图片等）起作用；前者让整个块脱离文档流、右移，并允许其他内容绕排。
-
text-align: right：文本右对齐，块本身还在原位，不脱离流 -
float: right：块自己跑到右边，后续兄弟块可能“上浮”填补空位，甚至被它覆盖 - 图文混排时，
float: right+ 图片 + 后续p文字，文字会自动绕到图左——这是text-align做不到的
浮动后父容器高度塌陷怎么办？
所有子元素都 float: right（或 left）时，父容器会“看不见”它们，高度塌成 0，边框消失、背景不显示。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥的修复是触发 BFC：给父容器加
overflow: hidden或overflow: auto - 更通用的方案是伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; }，再给父容器加class="clearfix" - 避免用
<div style="clear: both"></div>插额外标签，语义差且冗余
真正麻烦的不是怎么浮，而是浮完之后布局是否可控——尤其是多个 float: right 元素在窄屏下挤不开、换行错乱，或者和 position: absolute 元素打架。现代项目优先用 display: flex 或 grid，但维护老页面时，float: right 配 width 和 clearfix 还是得手熟。
