css浮动元素脱离文档流是因为其布局模式从“普通流”切换到了“浮动”，浏览器在计算其位置时不再考虑它在文档中的原始占位，而是将其移出正常渲染流程。这会导致父容器高度塌陷、后续非浮动元素发生文本环绕或位置重叠。要解决这一问题，通常采用清除浮动（clearfix）技术恢复父级高度，或者使用flexbox/grid等现代布局模型替代传统的浮动布局。
浮动元素在普通流中是如何被移除的
当给一个元素设置 float: left 或 float: right 时，该元素会向左或向右移动，直到其外边缘触及包含块边界或另一个浮动元素的边缘。关键在于，它在普通流（Normal Flow）中不再占据空间，其原始位置被后续的非浮动内容填补。这意味着父容器在计算高度时，默认不会将浮动子元素的高度计入其中，从而引发高度塌陷。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float Layout Demo</title>
<style>
.container {
border: 2px solid red;
/* 没有指定高度，依赖内容撑开 */
}
.floated-box {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
.normal-content {
background-color: lightgray;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="floated-box">Floated</div>
<div class="normal-content">
This content wraps around the floated box.
The parent container collapses because it doesn't see the floated child's height.
</div>
</div>
</body>
</html>运行上述代码，你会观察到红色边框的 .container 高度仅由 .normal-content 决定，而 .floated-box 实际上已经“飘”在了 .normal-content 的上方或侧方，且 .normal-content 的文字会环绕浮动元素。这直观地展示了普通流中位置的丢失和包围盒行为的改变。
立即学习“前端免费学习笔记（深入）”；
为什么清除浮动能修复布局混乱
清除浮动（Clearing Floats）的核心目的是让父容器重新感知到浮动子元素的存在，从而正确计算自身高度。最常用的方法是使用伪元素 ::after 创建一个不可见的块级元素，并应用 clear: both。这个伪元素位于浮动子元素之后，由于它设置了清除属性，它会下移到所有浮动元素之下，迫使父容器扩展高度以包裹它，进而间接包裹住浮动子元素。
<style>
/* 经典 Clearfix 方案 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
.container {
border: 2px solid green;
overflow: hidden; /* 另一种常见方案：BFC */
}
.floated-box {
float: left;
width: 100px;
height: 100px;
background-color: lightcoral;
}
.normal-content {
background-color: lightyellow;
padding: 20px;
}
</style>
<div class="container clearfix">
<div class="floated-box">Floated</div>
<div class="normal-content">
Now the parent container has correct height.
The text does not wrap around the float in a messy way.
</div>
</div>应用 clearfix 后，父容器的绿色边框会紧紧包裹住蓝色和红色的方块，文字不再无序环绕。这是因为 clear: both 强制伪元素避开左右两侧的浮动，从而撑开了父容器。此外，使用 overflow: hidden 触发 BFC（块级格式化上下文）也是一种有效手段，它能自动包含浮动元素，但需注意可能裁剪溢出内容。
浮动元素对相邻非定位元素的具体影响是什么
当一个非浮动的块级元素紧邻浮动元素时，它的边框盒（Border Box）会被浮动元素覆盖，但其内部的内容（如文本）会自动环绕浮动元素。这种现象被称为“文本环绕”。如果非浮动元素是行内元素或行内块，它们也会尝试占据浮动元素旁边的剩余空间，导致布局错位。这种交互是浮动设计初衷的一部分，但在复杂网格布局中往往造成意外的高度不一致和视觉混乱。
