浮动元素脱离文档流并左/右排列，导致父容器塌陷和布局错位，需通过clear、BFC或伪元素清除，曾用于多列布局，现多由Flex/Grid替代。
浮动元素通过脱离正常文档流并靠左或右排列，影响其他元素的布局方式。理解浮动的行为对掌握传统网页布局非常重要。
浮动元素脱离标准流
当一个元素设置 float: left; 或 float: right; 时，它会从正常的文档流中“浮”出来，不再占据原始空间。后续的块级元素会无视它的存在，向上移动，并可能被它覆盖或环绕。
- 文字和内联元素会围绕浮动元素排列
- 块级盒子会视浮动元素不存在，填充剩余空间
导致父容器塌陷
由于浮动元素脱离了文档流，其父元素在计算高度时无法感知它的存在，常常出现高度为零的情况，这就是“父容器塌陷”。
- 父元素背景、边框不显示
- 后续内容可能错位或重叠
解决方法包括使用清除浮动（clear）、触发BFC（如 overflow: hidden）或伪元素清除法：
立即学习“前端免费学习笔记（深入）”；
::after { content: ""; display: block; clear: both; }
多列布局中的应用
浮动常用于实现多列布局，比如两栏或三栏结构。
- 左侧导航栏设为 float: left; 固定宽度
- 右侧内容区域用 margin 留出空间
- 注意控制浮动范围，避免影响下方模块
清除浮动的影响
使用 clear: both; 可以强制元素出现在浮动元素下方，避免布局混乱。
- 添加空元素并设置 clear 属性（不推荐）
- 更优做法是使用CSS伪元素进行闭合
- 现代布局建议使用 Flex 或 Grid 替代浮动
基本上就这些。虽然浮动曾是主要布局手段，但现在已被更灵活的方案取代，但在处理图文混排或兼容旧代码时仍需了解其机制。
