CSS浮动布局与清除浮动

浮动float是CSS早期核心布局技术，诞生初衷是实现图文环绕效果，后续被拓展用于实现块级元素横向并排布局，在Flex布局普及前，是网页多列布局的主流方案。浮动包含三个核心属性值：float: left 左浮动，元素靠父容器左侧排列；float: right 右浮动，元素靠父容器右侧排列；float: none 无浮动，元素默认正常文档流显示。

浮动最核心特性：设置浮动的元素会完全脱离普通标准文档流，不再占据正常文档流的空间。普通文档流的标准元素会默认无视浮动元素，向上占位；而文字、图片等行内内容会环绕浮动元素排列，这也是图文环绕效果的实现原理。同时，浮动元素会自动具备行内块特性：可以设置宽高、横向排列、无默认换行，完美实现多列并排。

浮动最大弊端：高度塌陷问题。当父容器中所有子元素全部设置浮动后，子元素全部脱离文档流，无法撑起父容器高度，导致父元素高度变为0，后续所有正常文档流的元素会向上错位、重叠，造成整体布局崩塌。这是浮动布局最核心、最高频的问题，只要使用浮动，就必须清除浮动、解决高度塌陷。

三种主流清除浮动方案，适配不同开发场景：第一，伪元素清除浮动（企业首选、万能方案）。无需新增冗余标签，通过CSS伪元素自动在父容器末尾生成空白元素，设置clear: both清除左右浮动，兼容所有浏览器。使用方式：定义通用.clearfix类，给浮动元素的父容器添加该类，可全局复用。第二，父容器设置overflow: hidden。代码极简、使用方便，适合简单布局场景；缺点是会裁剪容器内超出的内容，不适合需要溢出显示、悬浮提示的模块。第三，空标签清除浮动。在所有浮动子元素末尾添加空div，设置clear: both，原理简单易懂；缺点是增加冗余HTML结构，代码不整洁，不推荐正式项目使用。

浮动布局总结与现代开发规范：浮动适合简单的图文环绕、简单两列/三列固定布局；但存在脱离文档流、高度塌陷、布局不稳定、适配性差等诸多问题。现代前端开发中，简单图文环绕保留浮动使用，所有多列并排布局全部替换为Flex/Grid，彻底规避浮动塌陷问题，布局更稳定、适配性更强。

浮动float作用：让块级元素横向排列、实现图文环绕，属性包含left左浮动、right右浮动、none无浮动。浮动元素会脱离普通文档流，导致父元素高度塌陷，是布局最常见问题。

三种清除浮动方案（实用）：1、伪元素清除浮动（万能推荐），给父元素添加clearfix类；2、父元素设置overflow:hidden；3、尾部添加空标签设置clear:both。浮动目前仅用于简单图文布局，复杂布局优先Flex。