CSS浮动原理、浮动塌陷问题与完整清除方案

浮动是前端早期核心布局技术，虽然现在Flex和Grid布局逐渐主流，但大量旧项目、企业源码、实训作业中仍然大量使用浮动布局，因此掌握浮动原理和清除浮动是前端必备基础能力。浮动最初设计的初衷并不是用来做布局，而是为了实现文字环绕图片的效果，后续开发者利用浮动脱离标准文档流的特性实现多列布局。

元素设置浮动后会脱离普通文档流，向左或向右停靠，同级浮动元素会并排排列，这也是多列布局的实现原理。但浮动最大的弊端是父级高度塌陷，当子元素全部浮动后，父盒子无法识别子元素高度，高度变为0，会导致下方所有页面布局全部错乱重叠，这是开发中最常见的布局bug。

目前行业内有三种成熟的清除浮动方案。第一种是额外标签法，在浮动父级末尾添加空div并设置clear:both，简单易懂但会增加冗余标签。第二种是父级overflow:hidden法，代码简洁，适合大多数普通布局场景。第三种是伪元素清除浮动法，通过:after伪类实现清除浮动，结构整洁、无冗余代码，是企业项目最主流、最规范的写法。熟练掌握浮动清除方案可以彻底解决传统布局塌陷问题。