float: inline-start/inline-end 是 css writing modes level 3 引入的逻辑值，用于适配不同书写方向，但 safari 至今不支持，chrome/firefox 支持有限，生产环境应避免使用；clear 同样无实质更新，主流浏览器中 inline-start/inline-end 无效。
float 在 CSS3 中没有本质性新功能，float: left 和 float: right 仍是主力；所谓“新增值”仅是书写方向适配语法，实际支持极差，生产环境应避免使用。
float: inline-start / inline-end 是什么
这两个值在 CSS Writing Modes Level 3 规范中被引入，目的是让浮动行为自动适配 direction 和 writing-mode（比如从右向左的阿拉伯语、竖排中文）。inline-start 表示“内容流起始侧”，inline-end 表示“内容流结束侧”。
但现实是：float: inline-start 在 Chrome 120+、Firefox 115+ 才开始有限支持，Safari 至今（2026 年）仍不识别该值，会退回到 float: none；IE 已淘汰，无需考虑。
无序列表呈现关键事实：
- 它不是替代
left/right的新方案，而是语义化补丁 - 无法通过 JS 动态读取计算值（
getComputedStyle(el).float仍返回"none"或空字符串） - 搭配
clear: inline-start同样不可靠，多数浏览器直接忽略
为什么不能用 float 做现代布局
浮动本意是“图文环绕”，不是布局工具。强行用它做多列、导航栏或卡片网格，会立刻触发三大经典问题：
第一，父容器高度塌陷：子元素全浮动后，父元素 height: auto 变成 0，除非手动创建 BFC（如加 overflow: hidden）或插入 clear 元素。
第二，换行逻辑反直觉：浮动元素按文档顺序贴靠，但宽度不足时“回溯找前一个兄弟”再换行，调试时难以预测位置。
第三，响应式脆弱：float 无内置断点机制，媒体查询中需重复写 float: none + 重设宽高 + 重调 clear，维护成本远高于 display: flex 或 grid。
clear 属性在 CSS3 中有更新吗
没有。clear 依然只有 left、right、both、none 四个有效值；inline-start 和 inline-end 理论上存在，但实测在所有主流浏览器中均无效——设置后既不阻止浮动元素，也不影响布局流。
真正可靠的清除方式只剩两种：
- 给父容器创建 BFC：
overflow: hidden（最简）、display: flow-root（推荐，语义清晰且无溢出裁剪副作用） - 伪元素清除法：
// .parent::after { content: ""; display: table; clear: both; }
注意：display: flow-root 是 2018 年加入 CSS Display Module Level 3 的标准属性，已获 Chrome/Firefox/Safari 全面支持，比 overflow: hidden 更安全（不意外隐藏滚动或阴影）。
现在该用什么替代 float 做并排布局
答案很明确：优先用 display: flex，复杂二维布局用 display: grid。它们原生支持对齐、换行、自适应、响应式，且不脱离文档流，不会导致父容器塌陷。
例如实现三栏等宽并排：
.container {
display: flex;
}
.item {
flex: 1;
}
而等价的 float 写法需要：
- 每个
.item加float: left - 父容器加
overflow: hidden或伪元素清除 - 为防止最后一项掉行，还得算好总宽减去 margin
- 响应式时要额外加 media query 覆盖 float
现代项目里还手写 float 布局，基本等于主动给自己埋兼容性雷和维护债。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
