浮动元素在HTML5中仍有效但不应用于布局，因其设计初衷是图文环绕而非容器对齐，易致高度塌陷、margin双倍、文档流错乱及响应失效；现代布局应优先使用flexbox或grid。
浮动元素在 HTML5 中仍然有效，但不该用作布局手段
HTML5 规范本身没有废除 float，但它明确不推荐用 float 做页面整体布局。现代布局应优先使用 flexbox 或 grid。用 float 做两栏、三栏或响应式结构，会带来清除浮动、高度塌陷、响应断点错乱等一连串维护问题。
为什么 float 布局容易出问题？
根本原因在于 float 的设计初衷是让文字环绕图片，不是为块级容器对齐服务的。常见现象包括：
-
父容器高度塌陷：所有子元素浮动后，父高度变成 0margin 双倍叠加：IE6 下浮动元素的margin-left或margin-right会翻倍文档流脱离不可控：后续非浮动元素会上移，可能覆盖或错位，靠clear补救只是打补丁响应式失效：媒体查询中重置float方向（如从left改none）常引发重排错乱如果必须用 float，怎么最小化风险？
仅限遗留项目维护或极简内联排版（如图文混排），务必配合以下实践：
- 用
overflow: hidden或display: flow-root替代老式clearfixhack 来闭合浮动 - 避免对
、等语义容器设float；只用于这类内容级元素 - 浮动方向统一用
float: left，避免混用left/right导致顺序依赖 - 宽度严格用
%或calc()，禁用固定px宽 +float组合（易溢出）
替代 float 的现代方案怎么选？
真正做布局时，两个 API 足够覆盖 95% 场景：
立即学习“前端免费学习笔记（深入）”；
- 单维排列（导航栏、卡片行、表单组）→ 用
display: flex，配flex-wrap和justify-content - 二维网格（后台列表、响应式画廊、仪表盘）→ 用
display: grid，配grid-template-columns和grid-gap -
绝对定位或
position: sticky仅用于特定锚点/悬浮场景，不用于主结构
别被“HTML5 新特性”误导——
float没变，变的是我们对布局责任的理解：语义归语义，样式归样式，控制权交给 CSS 布局模块，而不是靠副作用硬撑。
