文字错位因float脱离文档流致父容器塌陷，需用伪元素清除浮动；三栏宽度应设为calc(33.33% - 20px)并box-sizing: border-box；flex布局用flex: 1 1 calc(33.33% - 12px)实现等宽换行；展开动画用max-height过渡；高亮匹配需javascript实现。
用 float 实现三栏分类菜单时为啥文字错位？
因为 float 会脱离文档流，父容器高度塌陷，导致后续内容上移或重叠。常见现象是第三栏“跑”到第二栏下方、分类标题和图标对不齐。
- 必须给父容器加
overflow: hidden或伪元素::after清除浮动（推荐后者，兼容性更好） - 每栏宽度别写死成
33.33%，要预留边框和内边距：比如设width: calc(33.33% - 20px)，再配合box-sizing: border-box - 分类项用
@#@#@#@#@#@#@#@#@#@0而不是<div>电子产品</div>——可点击、SEO 友好、键盘可访问
flexbox 布局下如何让分类菜单自动换行且等宽？
用 display: flex + flex-wrap: wrap 是更现代的解法，但默认子项不等宽，需手动干预。
- 父容器设
display: flex; flex-wrap: wrap;，子项加flex: 1 1 calc(33.33% - 12px);（1 1表示可伸缩可收缩，calc控制基础宽度） - 避免用
justify-content: space-between，它会在最后一行留下巨大空隙；改用justify-content: flex-start+ 左右 margin 控制间距 - 如果分类数不是 3 的倍数（比如 8 个），最后一行只有两个 item，此时用
min-width: 0防止它们被拉宽撑满整行
移动端点开分类菜单后怎么避免页面跳动？
点击展开/收起时，height 从 0 到 auto 的 CSS 过渡会失效，导致生硬闪跳。
- 不用
height: auto做过渡，改用max-height（如max-height: 0→max-height: 300px），并配overflow: hidden - 每个分类子菜单加
padding-top: 0.5em和padding-bottom: 0.5em，而不是只靠margin，避免折叠时上下留白异常 - 用
aria-expanded="true/false"和aria-controls="submenu-1"标记状态，辅助技术能识别当前是否展开
纯 HTML/CSS 能否支持“搜索后高亮匹配分类”？
不能——高亮需要运行时匹配逻辑，必须用 JavaScript，但可以极简实现，不依赖框架。
- 监听
input事件，获取用户输入值term = input.value.trim().toLowerCase() - 遍历所有分类链接：
document.querySelectorAll('.category-link')，对link.textContent.toLowerCase().includes(term)做判断 - 匹配成功则加类
highlight，CSS 定义.highlight { background-color: #ffeb3b; font-weight: bold; } - 注意：别用
innerHTML替换文本内容，否则会清空事件监听器；只操作textContent或用classList控制样式
真正麻烦的是多级嵌套分类的展开状态同步，以及键盘操作（方向键切换、Enter 触发）——这些一旦加进去，代码量就翻倍，得权衡是否真需要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
