float本身不控制宽度，仅决定脱离文档流后的靠边方向；浮动元素宽度由其默认盒模型规则决定：行内元素为内容宽度，块级元素为auto（尽可能宽），需手动设置width或改用flex/grid等现代方案。
float:left 或 float:right 本身不控制宽度，必须显式设置
浮动元素默认不会“自适应内容宽度”——float 只决定脱离文档流后的靠边方向，它不改变元素的盒模型计算逻辑。一个 span 或 a 元素设了 float: left 后，确实会变成块级框（可设宽高），但它的宽度仍按初始规则计算：行内元素浮动后宽度默认是“内容宽度”，看似“自适应”，实则是未设 width 时的自然表现。
真正要注意的是：如果你期望它“撑满父容器某部分”或“随文字多少伸缩但有边界”，就得手动干预。否则在不同内容长度下可能错位、换行或挤压其他浮动元素。
- 对纯文本容器（如
span、em）设float: left，宽度由文字+内边距+边框决定，无需额外设置 - 对块级元素（如
div）设float: left，若没写width，多数浏览器会按width: auto计算——此时它会尽可能宽，直到碰到另一个浮动元素或父容器边界 - 若希望浮动
div宽度严格等于内容（比如图标+文字组合），必须加display: inline-block或用fit-content，float自身做不到
float:left 和 float:right 共存时，“自适应”容易被误解为“对齐”
很多人以为给两个元素分别设 float: left 和 float: right 就能左右贴边并自动留出中间空隙，结果发现它们上下错开、换行、甚至重叠。这不是 bug，而是浮动机制决定的：它们各自向包含块边缘靠拢，不协商间距，也不保证在同一行。
要让它们视觉上“左右呼应”，必须满足三个硬性条件：
立即学习“前端免费学习笔记（深入）”；
- 两个元素必须在同一个父容器内（否则参照的“包含块”可能不同）
- 父容器需触发 BFC（如
overflow: hidden、display: flow-root）或设明确宽度，否则父容器高度塌陷，布局失控 - 两个子元素不能超出父容器总宽度（例如父宽 600px，左浮元素宽 400px，右浮元素宽 300px → 必然换行）
示例中常见错误写法：<div class="left"></div><div class="right"></div> 但两个 div 没包裹在共同父容器里，float: right 的元素实际参照 body 右边界，而 float: left 参照自身父级，根本不在同一坐标系。
想让浮动元素真正“内容宽度 + 不换行”，优先考虑替代方案
float 的设计初衷是图文环绕，不是现代响应式布局。当你要的是“内容自适应宽度 + 左右并排 + 不塌陷 + 不换行”，float 已不是最优解，尤其在需要兼容 Flex/Grid 的今天。
以下情况建议直接放弃 float：
- 需要精确控制两列间隙（
float无法用gap） - 子元素高度不一致导致“卡住”（一个高一个矮，
float: left的后续元素被挡住） - 要支持响应式断点（
@media下切换单列/双列，float需大量clear重置） - 父容器要自动包裹所有子元素高度（
float必须清浮，而display: flow-root一行解决）
等效更可控的写法：display: flex 配合 flex: 0 0 auto（不伸缩、不收缩、内容宽度），或 display: grid 配合 grid-template-columns: fit-content(200px) fit-content(200px)。
清除浮动仍是 float 布局绕不开的环节
只要用了 float，父容器高度塌陷就是确定会发生的事——因为浮动元素已脱离文档流，父容器“看不见”它们。不处理，后续元素会上移、背景消失、边框截断。
最简可靠的清浮方式只有两种：
- 父容器设
overflow: hidden或overflow: auto（副作用：可能隐藏意外溢出内容） - 父容器设
display: flow-root（推荐，无副作用，现代浏览器全覆盖，IE 不支持但已淘汰）
别再用 <div style="clear:both"></div> 这种额外 DOM 清浮法——它污染结构、增加维护成本，且在 display: contents 等新特性下可能失效。如果项目还需兼容 IE11，才考虑 :after 伪元素清浮，但那已是历史遗留方案。
真正难的从来不是怎么写 float: left，而是记住：它一出手，整个父级的盒模型就变了，而这个变化，必须由你亲手收尾。
