图片浮动后段落塌陷是因为浮动使元素脱离文档流，导致父容器无法自动撑高；应使用clearfix等方案触发BFC来清除浮动，而非仅依赖clear: both或空div。
为什么图片浮动后下面的段落会塌上去
因为 float 会让元素脱离文档流，父容器高度无法自动包裹浮动子元素，后续内容就“顶”上来了——这不是图片的问题，是父容器没撑开。
常见错误现象：margin-top 失效、背景色不显示、兄弟块级元素位置错乱；尤其在响应式布局里，小屏幕下更容易暴露。
- 别只给图片加
clear: both：它只影响自身，不解决父容器塌陷 - 别用空
<div></div>+clear: both：语义差、冗余、移动端易出兼容问题 -
overflow: hidden虽然能触发 BFC 清除浮动，但会意外裁剪position: absolute子元素或阴影
clearfix 的现代写法（兼容 IE8+）
传统 :after 伪元素方案仍最可靠，关键是避免旧版 IE 的双冒号写法和 display 值陷阱。
推荐直接复用这段 CSS：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
.clearfix::after {
content: "";
display: table;
clear: both;
}
- 必须用
::after（双冒号），单冒号在 IE8+ 也能工作但不符合当前规范 -
display: table比block更安全：避免某些浏览器中 margin 折叠异常 - 不需要
height: 0或visibility: hidden：空 content + table 已足够隐藏且不占空间 - IE7 及更早需额外加
*zoom: 1，但如今基本可忽略
img 浮动时要不要给父容器加 clearfix
取决于父容器是否需要包裹高度。如果只是图文混排，且父容器本身有固定高或背景，可能根本不需要清浮。
典型使用场景：
- 文章正文内
<figure>包裹图片 + 图注，需让<figcaption>正确换行 - 响应式图库网格中，每张
<img>浮动，但外层<div class="gallery">必须自适应高度 - 侧边栏广告图浮动后，主内容区不能被“吸”上去
反例：父容器已设 display: flex 或 display: grid —— 这些布局模型天然不收浮动影响，加 clearfix 是多余操作。
现代替代方案：flex / grid 真的能绕过浮动吗
能，而且更干净。但要注意：不是所有“图片排列”都适合直接切 flex。
- 文字环绕图片（如左图右文）仍得靠
float，flex无法实现文本流式环绕 -
display: flex父容器中，子<img>的float会被忽略，此时清浮无意义 - 用
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))布局图库，比浮动 + clearfix 更稳，也无需考虑清除逻辑 - 性能上，
clearfix几乎无开销；而过度嵌套 flex 容器可能增加渲染树复杂度，尤其在长列表中
真正容易被忽略的是：同一页面中 float 和 flex 混用时，浮动元素会破坏 flex 容器的对齐预期，这种隐性冲突比清浮失败更难排查。
