用 display: flex 替代 float 解决图文对齐问题，配合 align-items: flex-start、flex-shrink: 0、margin-left 间距及 min-width: 0 防溢出；高亮需用带 边界的转义正则；class 遵循 bem 规范；调试时注意样式层叠与渲染优先级。
搜索结果项里图片和文字总不对齐？用 display: flex 而不是 float
图文对齐问题本质是容器内元素基线错位或盒模型计算混乱，float 在现代布局中容易引发清除浮动、高度塌陷、响应式断裂等问题。直接上 flex 更可控。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给结果项容器（如
.search-item）设display: flex; align-items: flex-start;，避免默认的align-items: baseline拉偏文字 - 图片加
flex-shrink: 0;防止小屏下被压缩变形 - 文字区域用
margin-left: 12px;（别用padding）保持间距稳定，padding会受父容器box-sizing影响 - 如果图片宽高不固定，务必加
min-width: 0;到文字容器，否则长文本可能溢出或撑破布局
关键词高亮样式被截断或漏匹配？正则要处理边界和大小写
用户搜 “react”，结果里 “React Native” 或 “react-router” 只高亮了部分，甚至把 “reaction” 也标错了——这是没加词边界和忽略大小写的典型表现。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 高亮逻辑别用
String.prototype.replace()简单替换，先用RegExp构造带的模式：new RegExp(`\b(${keyword})\b`, 'gi') - keyword 要
escape特殊字符，比如用户搜 “a+b”，不转义会当成正则语法报错；可用keyword.replace(/[.*+?^${}()|[]\]/g, '\$&') - 服务端返回的摘要文本若已含 HTML 标签，高亮前先做
textContent提取，否则<em>react</em>会被当字符串渲染成字面量
CSS class 命名一多就乱套？按 BEM 分三层限定作用域
搜索页常叠加筛选、排序、分页、高亮、加载态等模块，class 名如 highlight、active 很容易全局冲突，尤其和第三方 UI 库撞车。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 顶层用页面级命名空间：
search-result - 组件级加双下划线：
search-result__item、search-result__highlight - 修饰符用双横线：
search-result__highlight--partial（表示非全词匹配）、search-result__item--loading - 禁止写
.highlight { color: #f33; }这种无前缀规则，所有样式必须挂靠在search-result下
Chrome 调试时高亮颜色看不见？检查 color 和 background-color 的层叠顺序
写了 .search-result__highlight { background-color: #ffeb3b; }，但实际看不到黄底——大概率是父元素设置了 color 或 background-color 且优先级更高，或者用了 !important 覆盖了你。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 DevTools 里点开高亮元素，看 computed 样式中
background-color是否被标记为overridden - 避免在高亮 class 上设
color，只管背景；文字色由外层继承，否则深色主题下黄底白字变黄底黄字 - 如果用了 CSS-in-JS（如 styled-components），确保高亮样式插入顺序在主题样式之后，否则会被覆盖
- 移动端 Safari 对
background-color渲染有轻微延迟，可加will-change: background-color;强制触发合成层
图文对齐和高亮样式看着简单，但一旦混入异步加载、服务端摘要、暗色主题、缩放字体这些变量，每个 flex 值、每个正则边界、每个 class 前缀都得卡准位置。漏掉一个，就可能在某个机型或某个搜索词下突然失效。
