clear: both仅使自身避开浮动元素，不解决父容器高度塌陷；真正修复需触发BFC，推荐display: flow-root（一行代码、无副作用）、overflow: hidden（有裁剪风险）或clearfix::after（content+display+clear三者缺一不可）。
直接在浮动图片后加 clear: both 的元素，能阻止后续内容上浮重叠，但**它不解决父容器高度塌陷问题**——文章容器依然可能背景消失、边框断裂、后续区块“钻进”图片下方。
clear: both 只作用于自身，不修复父容器塌陷
clear: both 的本质是让当前元素“避开所有浮动”，强制换行，但它对父容器的高度计算毫无影响。父容器仍“看不见”浮动图片，height 保持为 0。
- 常见错误现象：图片左浮动，
<p>文字环绕正常，但文章容器的灰色背景没了，底部边框消失，紧接着的<h3>标题直接贴到图片右侧甚至被遮挡 - 使用场景：适合单点控制（比如确保某段落不环绕图片），不适合整块容器的布局兜底
- 别把它和清除浮动混淆：
clear是“避让”，不是“告知父级我有孩子在浮动”
真正要防溢出，得让父容器“感知”浮动图片
必须触发父容器的 BFC（块级格式化上下文），让它重新包含浮动子元素。三种主流方式里，display: flow-root 是最干净的选择，前提是不需要兼容 IE 或老版 Safari。
-
display: flow-root：无裁剪、无滚动干扰、不改变 margin 合并行为，写法就一行：.article { display: flow-root; } -
overflow: hidden：简单但危险——下拉菜单、tooltip、负 margin 装饰全会被裁掉；iOS Safari 中还可能卡 touch 事件 -
.clearfix::after：兼容性最好，但必须写全：content: ""+display: table+clear: both，漏任意一项在旧版 Safari 或 IE 中就失效
为什么给图片加 clear 没用？
给浮动图片自己加 clear: both 不仅无效，还会破坏文字环绕逻辑——它会让图片“避开前面的浮动”，但图片本身仍是浮动的，父容器照样塌陷。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<img src="..." style="float: left; clear: both;">—— 这只会让图片往下挪，不解决容器问题 - 正确位置：清除动作必须落在**浮动图片的父容器上**（如
.article），或在其末尾插入一个清除元素（如<div style="clear: both;"></div>） - flex 容器下更要注意：
display: flex会让float失效，此时加clear完全没意义，属于布局逻辑混乱
最容易被忽略的是：哪怕用了 display: flow-root，如果图片本身用了 transform: translateX(-20px) 或 margin-left: -30px，它视觉上“溢出”了，但父容器依然不会塌陷——这不是清除失败，是你的布局意图本就不该依赖浮动来实现偏移。
