关于float浮动的核心知识点

一、浮动基础概念
属性：float，作用于块级 / 行内块元素，让元素脱离普通文档流，向左 / 右悬浮排列。
取值
float: left：元素靠左浮动，后续元素环绕右侧
float: right：元素靠右浮动，后续元素环绕左侧
float: none：默认值，不浮动
float: inherit：继承父元素浮动属性
浮动元素特性
1）脱离标准文档流，不再占据原本文档位置；
2）自动转为行内块，可并排、能设置宽高；
3）文字 / 行内元素会环绕浮动盒子；
4）父容器高度塌陷（核心痛点）。
二、浮动带来的两大问题

1. 高度塌陷（最常用考点）
   父盒子内全部子元素浮动后，子元素脱离文档流，父盒子无内容支撑，高度变为 0。
2. 文字环绕
   普通流文字不会被浮动盒子覆盖，会自动环绕浮动元素；块级盒子会直接跑到浮动元素下方。
   三、清除浮动（解决高度塌陷 4 种方案）
   方案 1：额外标签法（最简单）
   浮动父末尾加空块元素，设置 clear: both
   css
   .clear

缺点：增加无意义 DOM 标签。

方案 2：父容器添加 overflow（简洁）
父盒子设置 overflow: hidden / auto / scroll
原理：触发 BFC，BFC 内部浮动元素会参与高度计算
缺点：超出父容器内容会被隐藏。

方案 3：伪元素清除浮动（最优，项目常用）
给父类添加 clearfix，无多余标签
css
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix {
zoom: 1; / 兼容旧IE */
}

方案 4：双伪元素清除（兼顾前后浮动）
css
.clearfix::before,.clearfix::after{
content:"";
display:table;
}
.clearfix::after{
clear:both;
}

四、clear 属性详解（清除浮动环绕效果）
用于阻止元素旁边出现浮动元素，只能作用块级元素
clear: left：左侧不允许浮动元素
clear: right：右侧不允许浮动元素
clear: both：左右两侧都不允许浮动（最常用）
clear: none：默认，允许两侧浮动
五、BFC 与浮动关联
BFC（块级格式化上下文）会包含内部浮动元素，解决高度塌陷：
触发 BFC 方式：
overflow: hidden/auto/scroll（非 visible）
display: inline-block / flex / grid
position: absolute/fixed
float: left/right
六、浮动布局优缺点
优点
早年主流多栏布局、图文环绕效果实现简单。
缺点
脱离文档流，布局不稳定；
必须额外清除浮动，代码冗余；
垂直居中、等分宽实现麻烦；
现在开发优先 Flex / Grid 替代浮动做页面布局，浮动仅用于图文环绕。
七、高频对比考点：浮动 vs Flex
float：图文环绕、老式多栏；需清浮动、高度塌陷；脱离文档流
flex：现代弹性多栏等分布局；自带高度自适应，无需清除浮动；不脱离文档流
八、一句话核心总结
float 使元素脱离文档流左右并排，会造成父高度塌陷；通过 clear 或 BFC 清除浮动；页面布局优先 Flex，浮动只用来做文字环绕。