文字紧贴图片不是float失效，而是其默认行为——文字作为行框紧贴浮动元素的margin边界排布；需设display:block、对应方向margin及父容器触发BFC（如display:flow-root）才能实现可控间距。
文字紧贴图片不是 float 失效，而是它本来就这样工作——float 的环绕行为默认紧贴浮动元素的 margin 边界，不加 margin 就没有间距。
为什么 float 后文字默认没空隙
浏览器把文字当作行内流（line box）来处理，它会自动“贴着”浮动元素的外边距（margin edge）排布，而不是边框或内容区。这意味着：
• float: left 时，第一行文字左端对齐容器，右端紧挨图片的 margin-right 边界
• 如果没设 margin-right，就直接顶到图片右边缘
• 这不是 bug，是 CSS 规范定义的原始行为
加了 margin 还没反应？先查这三件事
常见失效原因不是写错了样式，而是基础条件没满足：
-
img没设display: block—— 默认是inline-replaced元素，部分浏览器下margin对 inline 元素表现异常 - 父容器没触发 BFC（比如漏了
display: flow-root或overflow: hidden）—— 浮动塌陷后，文字根本绕不起来，调margin白费劲 - CSS 被覆盖 —— 比如父容器设了
font-size: 0，或文字容器有负margin抵消了图片的间距
正确写法：方向、属性、顺序都不能错
左浮动图片的典型配置（右浮动同理反向）：
立即学习“前端免费学习笔记（深入）”；
img.float-left {
float: left;
display: block;
width: 150px; /* 必须设 width，否则环绕空间不可控 */
margin-right: 16px; /* 只有这个起作用，控制文字右侧间距 */
margin-bottom: 8px; /* 防第二段文字“掉”到图片底部 */
}注意：
• 别用 margin: 12px 这种简写——上下 margin 会撑高行框，导致段落错位
• margin-left 在左浮动时完全无效，只会把图片往左顶，文字更挤
• margin-bottom 不是可选，它是防多段文字错位的关键一环
第二段文字突然从图片底部开始？这不是 margin 的问题
这是父容器高度塌陷的典型症状：第一段文字还在绕，但父容器没“兜住”浮动元素，第二段 <p> 按原始文档流从顶部开始渲染，视觉上像断开了。
修复方式只有一条路：
• 现代项目：给父容器加 display: flow-root（Chrome 64+/Firefox 59+/Safari 15.4+ 支持）
• 兼容旧环境：用伪元素清除 ::after { content: ""; display: table; clear: both; }
• 别给 <p> 或 <img> 加 clear: both——它只对块级元素自身生效，且不能解决塌陷根源
真正容易被忽略的是：浮动环绕只认边界和行高，不理解语义，也不适配 Flex/Grid 容器。一旦混用，调试成本远高于直接换用 display: flow-root 或现代布局方案。
