清除浮动仅修复高度塌陷，不负责复杂图文混排；真正决定排版的是float方向、尺寸、margin及容器结构；现代项目应优先采用grid或flow-root替代float。
清除浮动本身不负责实现“复杂图文混排”，它只是修复浮动带来的高度塌陷问题；真正决定图文排版效果的是 float 的方向、宽高、margin 控制，以及容器结构设计。
float:left + 文字环绕的边界条件
图片或模块设 float: left 后，紧随其后的文本（p、h3 等块级元素）会自动上移并环绕右侧——但前提是这些文本没有被其他 CSS 干扰：
- 父容器不能有
overflow: hidden之类触发 BFC 的设置（否则文字会被截断或无法环绕） - 文本元素不能自己也设了
float或position: absolute，否则脱离文档流就失去环绕能力 - 图片必须显式声明
width和height，否则在某些浏览器中可能渲染异常 -
margin-right是控制图文间距的关键，建议用固定像素值（如12px），避免百分比导致响应错乱
多图多文交错布局时，clear 的位置很关键
当一行里有多个浮动图片+对应说明文字，且需要“每组独立换行”时，clear: both 不能随便加在文字末尾——它会把整行都推到下一行。正确做法是给每组容器单独包裹，并在该容器上应用清除逻辑：
- 不要写：
<p>文字</p><div style="clear:both"></div>（破坏语义，且清的是全局） - 应该写：
<div class="media-item"><img><p>文字</p></div>，然后对.media-item使用clearfix - 若需“左图右文 → 右图左文 → 左图右文”交替，直接用
float: right切换图片方向即可，无需额外 clear
伪元素 clearfix 必须配合 display: block
很多人复制 .clearfix::after 代码后发现没生效，常见原因是：
立即学习“前端免费学习笔记（深入）”；
-
::after默认是display: inline，而clear只对块级元素有效 —— 必须显式写display: block -
content: ""不能为空字符串以外的值（比如"."），否则某些旧版 Safari 不识别 - 如果父容器本身是
display: inline-block或flex，::after清除会失效 —— 此时应改用overflow: auto或直接放弃 float - 别漏掉 IE 兼容写法：
*zoom: 1（针对 IE6/7），现代项目可忽略
现代项目里，float 布局正在快速退场
真正复杂的图文混排（比如首行缩进+图片嵌入+多栏浮动+响应式断点）用 float 实现成本极高：
-
float无法控制垂直对齐，vertical-align对它无效 - 响应式切换列数时，
float需要大量媒体查询重置width和clear - 与
position: sticky、aspect-ratio等新特性冲突明显 - 推荐用
display: grid配合grid-template-areas定义图文区域，或用display: flow-root替代 clearfix —— 这些方案不会引发塌陷，也不依赖 hack
复杂图文混排真正的难点不在“怎么清浮动”，而在“如何让不同尺寸的图片、标题、段落在各种视口下保持视觉节奏一致”——这已经超出 float 的能力边界，得靠容器查询（@container）或 CSS Nesting 配合逻辑组合来解决。
