浮动元素的本质是脱离文档流并靠左或右对齐包含块，导致父容器塌陷、无法margin居中、不响应top/left定位；图文并排依赖文字绕行而非图片固定，需设宽高、紧邻文字、清除浮动。
浮动元素的定位本质是脱离文档流
浮动不是“把图片往左挪一点”这种视觉微调，而是让元素从正常文档流中抽离，然后尽可能靠左或靠右对齐其包含块（通常是父容器），其他内容会环绕它。这意味着：float 不改变父容器高度（容易导致塌陷），也不响应 margin: auto 居中，更不能用 top/left 精确控制位置。
- 常见错误：给浮动图片加
margin-top: 20px但发现没效果——其实是上边距被“吸走”了，因为浮动后它不再参与块级流垂直方向的 margin 合并 - 图文并排真正起作用的是“文字内容自动绕行”，不是图片被“固定在某处”；如果文字太少，可能根本看不出并排效果
-
float: left和float: right是唯二合法值，float: center不存在
实现图文并排最简可行方案
不需要 flex 或 grid，纯浮动也能稳定工作，关键是处理好清除浮动和容器包裹逻辑：
- 给图片加
float: left（或right），并显式设置width和height（否则可能撑不开、换行错乱） - 确保文字内容在 HTML 中紧随
- 父容器末尾必须加清除浮动的元素，比如：
，否则父容器高度为 0，背景、边框都会消失@@##@@这里是环绕图片的文字内容……
浮动布局的兼容性与现代替代方案
float在所有浏览器中都支持，包括 IE6，但它本质是为“文字环绕图片”这类印刷场景设计的，不是通用布局工具。现在遇到的问题大多源于误用：立即学习“前端免费学习笔记（深入）”；
- 想让多个卡片横向排列？用
display: flex更可靠，float容易因换行、间隙、高度不一致出错 - 需要响应式图文混排？
float无法自动换行对齐，而flex-wrap: wrap或 CSS Grid 天然支持 - 调试时看不到浮动元素？检查是否忘了设宽高，或父容器 overflow 被设为 hidden 意外裁剪了浮动区域
浮动失效的三个高频原因
不是代码写错了，而是忽略了浮动生效的前提条件：
- 父容器
overflow设为hidden或auto，且子元素未设宽高 → 浮动元素被裁剪或不可见 - 图片是内联元素，默认有基线对齐（baseline），下方留白，看起来像“位置偏高”，加
vertical-align: top或display: block解决 - 用了
position: absolute或position: fixed覆盖了float——position的优先级高于float，此时float完全无效
浮动本身很简单，难的是理解它如何跟文档流、盒模型、层叠上下文相互作用。很多“调不好”的问题，其实卡在父容器高度塌陷或文字内容没真正环绕上去——先确认这两点，再调样式。
- 父容器末尾必须加清除浮动的元素，比如：
