浮动元素脱离文档流并左/右对齐，导致父容器高度塌陷，需通过clear属性、触发BFC或伪元素清除法解决，常用于文字环绕与多列布局，虽被Flexbox和Grid取代，但对维护旧代码仍有价值。
浮动（Float）是css中一种传统的布局方式，最初设计用于实现文字环绕图片的效果。随着网页设计的发展，开发者开始利用浮动来控制元素的排列方式，尤其是在多列布局中广泛应用。虽然现代布局更多依赖Flexbox和Grid，理解浮动的工作原理依然有助于处理旧代码或特定场景。
浮动的基本行为
当一个元素设置float属性后，它会脱离正常的文档流，并尽可能向左或向右移动，直到碰到包含块的边缘或另一个浮动元素。
浮动元素仍会影响周围内容的布局，尤其是文本和其他内联内容会围绕它显示。
浮动对父容器的影响
由于浮动元素脱离了标准文档流，父容器在计算高度时通常“看不到”它们，导致父元素高度塌陷——即父容器高度可能为0，即使内部有浮动子元素。
立即学习“前端免费学习笔记（深入）”；
例如：
上面的外层div如果没有额外处理，高度将无法包裹住内部的浮动元素。
清除浮动的方法
为解决高度塌陷问题，需要“清除浮动”，使父容器正确包含浮动子元素。
- 使用 clear 属性：添加一个空元素并设置 clear: both; 来阻止其与前面的浮动元素并排。
- 触发BFC（块格式化上下文）：给父元素设置如 overflow: hidden; 或 display: flow-root; 可自动包含浮动。
- 使用伪元素清除法：推荐方式，通过 ::after 伪元素结合 clear 实现视觉清理，不影响结构。
常见clearfix写法：
.clearfix::after { content: “”; display: block; clear: both; }
浮动与其他布局的交互
浮动元素会与行内内容共存，但可能影响后续块级元素的位置。非浮动块级元素通常会“无视”浮动元素而占据整行，但其内部的行框会避开浮动区域。
这意味着文本内容会“让出空间”给浮动元素，但整个盒子仍可能延伸到浮动下方。
同时，浮动元素之间不会重叠（同方向会依次排列，反方向可能相邻），这使得简单的多栏布局成为可能。