float: left 和 float: right 的核心差异在于浮动方向及内容环绕路径：left 向行首左贴、文字从右绕，right 向行尾右贴、文字从左绕；二者均脱离文档流致父容器塌陷，需 clear 清除影响。
float: left 和 float: right 的行为差异到底在哪
它们不是镜像对称的“左右兄弟”，而是共享同一套浮动规则，但触发方向不同。真正影响布局的，是浮动元素在文档流中“向哪边挤”以及后续内容“绕哪边走”。
常见错误现象：float: right 元素卡在上一个块级元素底部、不靠右；float: left 的多个元素意外换行——往往不是方向问题，而是父容器没清浮动或宽度不够。
-
float: left：元素尽可能往其所在行的最左侧贴，后续内联内容（如文字）从右侧开始环绕 -
float: right：元素尽可能往其所在行的最右侧贴，后续内联内容从左侧开始环绕 - 两者都会脱离文档流，父容器高度塌陷（除非清浮动）
- 浮动方向不影响 z-index 或层叠上下文，只影响定位起点和环绕路径
什么时候必须用 float: left，而不是 right
当需要实现多列自左向右依次排列（比如导航菜单、图文混排中的左图右文），float: left 是更自然的选择。它符合 HTML 书写顺序和阅读流，浏览器渲染时更容易预测行为。
使用场景示例：三栏卡片网格，每张卡片 width: 30% + float: left，配合 margin-right: 5% 实现间隙；若全用 float: right，则需反序写 HTML 才能保持视觉左→右，维护成本陡增。
立即学习“前端免费学习笔记（深入）”；
- 响应式断点中，
float: left更容易配合max-width和box-sizing: border-box控制换行时机 -
float: right在 RTL（右向左）语言页面中反而可能更符合逻辑，但需配合direction: rtl，否则易错乱 - 不要为“看起来整齐”而强行统一用某一种；优先按语义和内容流向选
clear 属性为什么总和 float 绑定出现
clear 不是 float 的配置项，而是它的“刹车片”。没有 clear，浮动元素之后的内容会持续环绕，直到遇到另一个浮动或块级边界。
典型错误：float: left 的侧边栏后跟一个 <p></p>，结果段落文字从侧边栏下方开始，而不是从顶部新起一行——这就是缺了 clear: both。
-
clear: left：当前元素上边不能有未清除的float: left元素 -
clear: right：同理，针对float: right -
clear: both最常用，尤其用于“结束浮动影响”，比如导航栏末尾加一个<div style="clear:both"></div> - 现代写法倾向用
::after伪元素清浮动（content: ""+display: table），避免额外 DOM 节点
float 已被弃用？那还值得学吗
CSS 规范里 float 没被删除，只是不再推荐用于复杂布局。但它仍在真实项目中高频出现：老系统维护、邮件模板（float 兼容性远超 Flex/Grid）、某些 CMS 输出的内联样式、或者需要文本环绕图片的场景。
容易被忽略的点：float 会隐式触发 block formatting context（BFC），这意味着它能隔离内部 margin collapse 和外边距穿透——这点常被当成“副作用”利用，比如防止父子 margin 合并。
- 不要在新项目中用
float做整页布局（比如 header + main + sidebar） - 但处理“一段文字绕一张图”时，
float: left+margin仍是语义清晰、兼容性稳妥的解法 - IE8+ 都支持，比
display: flex多覆盖近十年旧环境 - 真正复杂的浮动嵌套（比如
float内再float）极易失控，这时该切到 Grid 或 JavaScript 补位
