一、为什么要清除浮动（浮动带来的 2 大核心问题）
- 父级高度塌陷（你当前代码的问题）
·标准流盒子会自动包裹内部子元素，高度由子元素撑开；
·子元素加 float 后脱离标准流，父容器看不到浮动子元素，高度直接变成 0；
·表现：父盒子粉色背景只有固定 height:200px 那一行，无法包住第二行的第 4 个 li。
- 后续标准流布局错乱
浮动元素会 “飘在标准流上方”，下方正常文档流的盒子会往上窜，被浮动元素遮挡、排版错位。
二、清除浮动的本质
清除浮动不是取消元素的 float 属性，而是：
让父容器识别内部浮动子元素，自动撑开高度；
让后面的标准流盒子不受前面浮动元素的影响，正常换行。
三、4 种主流清除浮动方法（优缺点 + 代码）
方法 1：父容器添加 overflow: hidden（最简单，日常开发最常用）
原理
触发 BFC（块级格式化上下文），BFC 容器会计算内部浮动元素高度，自动撑开父盒子。
使用
直接给浮动子元素的父盒子加样式：
css
.box {
width: 800px;
overflow: hidden; /* 核心清除浮动代码 /
/ height:200px; 建议删掉，让高度自适应 */
background-color: pink;
margin: 0 auto;
}
优点
代码极少、书写方便、兼容性好；
缺点
如果子元素内容超出父盒子，超出部分会被隐藏（弹窗、下拉菜单场景不适合用）。
方法 2：额外空 div + clear: both（基础原理教学用）
原理
clear: both 代表：左右两侧都不允许出现浮动元素，强制该元素换到浮动元素下方，撑起父高度。
HTML 结构
在父盒子最末尾加一个空 div：
html
CSS
css
.clearfix {
clear: both; /* 清除左右浮动 */
height: 0;
}
优点
直观易懂，无内容截断问题；
缺点
额外增加无意义 HTML 标签，污染结构，项目中很少用。
方法 3：伪元素清除浮动（万能方案，企业标准写法）
原理
利用 ::after 在父盒子内部末尾生成一个看不见的行内块元素，等价于方法 2 的空 div，不新增 HTML 标签。
CSS 通用类（全局一次定义，所有父盒子都能调用）
css
/* 通用清除浮动类 */
.clearfix::after {
content: ""; /* 必须有内容，空字符串即可 */
display: block; /* 转为块级元素，clear才生效 */
clear: both; /* 清除左右浮动 */
height: 0; /* 不占用空间 */
visibility: hidden; /* 隐藏元素 */
}
.clearfix {
*zoom: 1; /* 兼容老旧IE6/7，现代网页可省略 */
}
使用
给父盒子加 class：
html
预览
优点
不增加多余 HTML、不会截断子元素、兼容性完美，企业项目首选；
缺点：代码稍多，需要记忆模板。
方法 4：给父盒子设置固定高度（治标不治本，不推荐）
直接写死父盒子 height，强行撑起高度：
css
.box {
height: 400px;
}
缺点
子元素高度变化、数量增减时，需要手动修改 height，维护麻烦，仅固定尺寸布局临时使用。
四、clear 属性细分讲解
clear 只能作用于块级元素，控制自身是否避让浮动：
1.clear: left：左侧不允许有浮动，只避开左浮动；
2.clear: right：右侧不允许有浮动，只避开右浮动；
3.clear: both：左右都避让浮动，开发统一用这个；
4.clear: none：默认值，不避让浮动。
五、使用场景选择建议
1.普通列表、商品卡片、导航栏（无溢出内容）：用 overflow: hidden；
2.包含下拉、弹窗、提示框（子元素会超出父盒子）：用伪元素 .clearfix；
3.课堂理解原理：空 div + clear: both；
4.固定不变的盒子（极少用）：固定 height。
六、结合你当前代码完整修复示例（伪元素万能版）
html
修复后粉色父背景会完整包裹两行 li，不再出现高度塌陷。
浙公网安备 33010602011771号