修复浮动导致父容器高度塌陷的方法有三种：一是设置父容器 overflow: hidden/auto；二是在末尾添加 clear:both 的清除元素；三是用伪元素 ::after 触发 BFC 并清除浮动（推荐）。
float 导致父容器高度塌陷怎么修
浮动元素会脱离文档流，父容器如果全由浮动子元素组成，计算高度时会忽略它们，表现为“高度为 0”——常见于导航栏、图文混排后内容被遮挡或布局错乱。
修复本质是让父容器“感知”到浮动子元素的存在。主流方案有三：
给父容器加
或
（简单有效，但可能意外裁剪溢出内容）
在最后一个浮动子元素后插入一个清除元素：
用
伪元素
触发 BFC 并清除：给父容器加 CSS 规则
（推荐，无额外 DOM，兼容性好）
clear 属性只能作用于块级元素吗
是的。
只对
值为
、
或
（部分
浏览器
）等生成块级框的元素生效；对
、
无效。
常见误用场景：
立即学习
“
前端免费学习笔记（深入）
”；
给
或设置了
的按钮加
，毫无效果
Flex 容器子项即使设了
，也不起作用（Flex 布局不走浮动流）
若需在 Flex/Grid 布局中实现类似“换行避让”效果，应改用
或
等原生机制。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
float 和 inline-block 混用会出什么问题
两者都用于水平
排列
，但底层机制冲突：浮动元素脱离文档流，而
仍在行内格式化上下文中，且受空白符影响。
典型症状：
同一行中既有
元素，又有
元素，后者可能被“挤到下一行”，或出现不可控间隙
对浮动元素无效，但对
生效，混用时对齐行为混乱
建议统一方案：
老项目维护可全用
+
，但务必处理塌陷
新项目优先用
或
替代二者
float:right 配合文字环绕时的常见陷阱
用
实现图片右置、文字绕排很常见，但容易忽略以下细节：
图片必须放在文字内容之前（HTML 顺序），否则文字不会“绕”到右侧，而是从下方开始流
若图片后紧跟
或其他块级元素，且该元素未设
，可能紧贴图片底部而非环绕
移动端缩放或小屏下，浮动图片可能撑出容器，需配合
和
示例结构应为：
浮动本身已属过时布局手段，现代开发中仅需在兼容旧系统或特定图文排版场景下谨慎使用；真正要花时间掌握的，是它失效时如何快速定位——比如检查父容器是否塌陷、当前元素是否被设为
、或者根本已处于 Flex/Grid 上下文里。
overflow: hiddenoverflow: auto::after { content: ""; display: table; clear: both; }cleardisplayblocktableflexinlineinline-blockdisplay: inline-blockclear: leftclearflex-wrap: wrapgrid-auto-flowinline-blockfloat: leftdisplay: inline-blockvertical-aligninline-blockfloatcleardisplay: flexdisplay: gridfloat: rightclearmax-width: 100%height: auto
这里是环绕文字……
inline