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