浮动元素脱离文档流是因为float使元素脱离普通流并允许文本环绕，导致父容器塌陷；清除浮动需在父容器层面处理，常用伪元素法、overflow触发BFC或空标签法。
浮动元素为什么会脱离文档流
因为 float 的本质是让元素“脱离普通流”，向左或右尽可能靠近父容器边缘，同时允许文本或其他内联内容环绕它。这导致后续块级元素会无视它的物理占位，直接从顶部开始渲染——看起来就像“塌陷”了。
常见现象：父容器高度为 0、下方兄弟元素上移覆盖浮动内容、背景色/边框无法包裹子浮动项。
- 只对
display值为block、table或inline-block的元素生效；inline元素设float后会变成块级框 -
float: left和float: right互斥，同一父容器中不能同时靠左又靠右（除非用不同嵌套层级） - 现代布局中已不推荐用
float做整体页面结构，但仍有真实遗留场景需要处理
清除浮动的三种常用方法及其适用条件
核心目标是让父容器“感知”到浮动子元素的存在，从而撑开自身高度。不是所有方法都等价，选错会导致布局错乱或兼容性问题。
-
伪元素清除法（推荐）：在父容器末尾插入
::after，设置clear: both并触发 BFC
.clearfix::after { content: ""; display: table; clear: both; }适用于大多数现代项目，语义清晰，不影响 HTML 结构 -
overflow: hidden 触发 BFC：给父容器加
overflow: hidden或overflow: auto
简单粗暴，但可能意外裁剪溢出内容（如阴影、下拉菜单），慎用于有position: absolute子元素的容器 -
额外空标签清除：在浮动元素后加
<div style="clear:both"></div>
仅限老项目维护或 CMS 输出不可控时临时补救，污染 HTML 结构，不推荐新写法
哪些场景还必须用 float 而非 Flex/Grid
不是所有浮动都该被替代。某些特定视觉需求下，float 仍是唯一简洁解法。
立即学习“前端免费学习笔记（深入）”；
-
文字环绕图片：比如新闻正文里一张侧边配图，要求段落文字自动绕排——
float: left配合margin是最自然的实现方式 -
多列文章摘要列表（无固定行高）：当每项高度不一致，又需横向排列且换行对齐时，
float比flex-wrap更易控制基线对齐（尤其含标题+描述+时间戳的卡片） -
IE8–IE9 兼容需求：这些浏览器不支持
flex或grid，仍需依赖float布局 +clearfix
clear 属性值的实际影响范围
clear 不是“清除所有浮动”，而是指定当前元素**不能紧贴在哪个方向的浮动元素旁边**。理解这点能避免误用。
-
clear: left→ 当前元素的上边界必须低于所有左侧浮动元素的下边界 -
clear: right→ 同理，避开右侧浮动元素 -
clear: both→ 同时避开左右两侧浮动元素（最常用） -
clear: none→ 默认值，不限制位置 - 注意：
clear只对**块级元素**有效；inline或inline-block元素设了也无效
真正容易被忽略的是：清除浮动的效果只作用于“当前元素自身”，不会改变其父容器的高度——所以单独给子元素加 clear 无法解决父容器塌陷问题，必须在父容器层面处理。
