浮动元素会自动变为块级元素，无论原display值如何；浏览器将其内部计算为display: block，导致inline、inline-block、flex等特性失效，现代布局应优先使用flex或grid。
浮动元素会自动变成块级元素，无论它原本是 inline、inline-block 还是其他 display 类型。
浮动会强制改变 display 值
当给一个元素设置 float: left 或 float: right 时，浏览器会忽略其原始的 display 值（比如 inline、inline-block、table-cell 等），并将其内部计算为 display: block。这是 CSS 规范明确规定的——浮动元素必须是块级框（block-level box）才能参与浮动布局。
- 一个
默认是 inline，加了float: left后，它就能设置宽高、上下 margin，并独占一行浮动位置 - 一个
display: inline-block的按钮，浮动后，其 inline-block 特性（如基线对齐、间隙处理）将不再生效 -
display: table-cell或display: flex元素一旦浮动，也会退化为 block 行为，flex 容器特性完全失效
浮动元素无法保持原有 display 语义
即使你在 CSS 中显式写 display: inline 并同时写 float: left，浏览器最终渲染时仍按 block 处理。开发者工具中“Computed”面板会显示 display: block（或类似 block 的行为），而 Styles 面板里写的 display 值只是“声明值”，不等于“生效值”。
- 浮动不支持与某些 display 值共存，例如
display: none会直接让元素不渲染，float 无效；display: contents与 float 冲突，多数浏览器会忽略 float -
display: run-in（已废弃）和display: ruby系列在浮动下行为不稳定，应避免组合使用
现代布局中更推荐替代方案
由于浮动本质是为图文环绕设计的，强行用于整体页面布局易引发清除问题、高度塌陷等副作用。CSS 新标准提供了更可控的方式：
立即学习“前端免费学习笔记（深入）”；
- 用 display: flex 替代浮动实现横向排列，子项 display 不受影响，可自由设 inline、block、flex 等
- 用 display: grid 控制复杂二维布局，无需浮动，也不改变子元素 display 语义
- 图文环绕需求可用 shape-outside + float 组合，但此时 float 仅作用于文字流，不影响自身 display 计算逻辑
不复杂但容易忽略：float 是布局历史遗留机制，它的 display 强制转换规则至今有效，但日常开发中尽量少依赖它来控制结构。
