17370845950

浮动元素脱离文档流并左/右排列，导致父容器塌陷和布局错位，需通过clear、BFC或伪元素清除，曾用于多列布局，现多由Flex/Grid替代。

浮动元素通过脱离正常文档流并靠左或右排列，影响其他元素的布局方式。理解浮动的行为对掌握传统网页布局非常重要。

浮动元素脱离标准流

当一个元素设置 float: left; 或 float: right; 时，它会从正常的文档流中“浮”出来，不再占据原始空间。后续的块级元素会无视它的存在，向上移动，并可能被它覆盖或环绕。

• 文字和内联元素会围绕浮动元素排列
• 块级盒子会视浮动元素不存在，填充剩余空间

导致父容器塌陷

由于浮动元素脱离了文档流，其父元素在计算高度时无法感知它的存在，常常出现高度为零的情况，这就是“父容器塌陷”。

• 父元素背景、边框不显示
• 后续内容可能错位或重叠

解决方法包括使用清除浮动（clear）、触发BFC（如 overflow: hidden）或伪元素清除法：

多列布局中的应用

浮动常用于实现多列布局，比如两栏或三栏结构。

• 左侧导航栏设为 float: left; 固定宽度
• 右侧内容区域用 margin 留出空间
• 注意控制浮动范围，避免影响下方模块

清除浮动的影响

使用 clear: both; 可以强制元素出现在浮动元素下方，避免布局混乱。

• 添加空元素并设置 clear 属性（不推荐）
• 更优做法是使用CSS伪元素进行闭合
• 现代布局建议使用 Flex 或 Grid 替代浮动

基本上就这些。虽然浮动曾是主要布局手段，但现在已被更灵活的方案取代，但在处理图文混排或兼容旧代码时仍需了解其机制。