应给文本容器设 overflow: hidden 或 display: flow-root 创建 BFC，图标用 display: inline-block; vertical-align: middle；优先采用 flex 布局替代 float。
float图标后文本被挤出容器怎么办
用 float 实现图标左浮、文字环绕，最常见问题是文字内容撑破父容器，尤其在响应式场景下——不是文字太长，而是 float 元素脱离文档流后，后续块级元素（比如 p 或 div）没触发 BFC，导致 margin 不生效或布局塌陷。
- 必须给警告框的文本容器（如
.alert-text）设置overflow: hidden或display: flow-root，强制创建 BFC，让 margin 正常作用于浮动元素的右侧 - 避免对文本容器本身用
float，否则会连锁浮动，更难控制 - 图标宽度要明确（比如
width: 20px），否则不同字体渲染下float占位不一致，margin 计算偏移容易错位
图标和文字垂直居中对不齐
float 默认按基线（baseline）对齐，而图标通常是内联块或背景图，文字是行内内容，天然存在 4–6px 下沉。强行加 vertical-align: middle 对 float 元素无效——它只对 inline/inline-block 生效。
- 把图标设为
display: inline-block; vertical-align: middle，再配合float: left（注意：float和vertical-align可共存，只要不是纯文本节点） - 文字容器用
line-height匹配图标高度（如图标高 24px，就设line-height: 24px），比依赖padding-top更稳定 - 慎用
margin-top微调——一旦字体大小变化或换行，偏移就会失效
移动端 float 图标错位或消失
部分 iOS Safari 旧版本（≤14.5）和安卓 WebView 对 float + min-width / max-width 组合渲染异常；另外，当父容器设了 zoom: 1 或触发 hasLayout 的 hack 时，float 行为可能变异。
- 优先用
display: flex替代float（仅需支持 iOS 9+ / Android 4.4+）：图标flex-shrink: 0，文字容器flex: 1，天然居中且无 BFC 烦恼 - 若必须用
float，给父容器加width: 100%或min-width: 0，防止弹性容器里float被压缩归零 - 检查是否误加了
transform: translateZ(0)等触发硬件加速的样式——某些 WebView 下会让float元素脱离渲染层
警告框无法适配暗色模式或动态主题
图标靠 background-image 或 content: url() 引入时，颜色无法随 CSS 变量切换；用伪元素 + Unicode 图标（如 ⚠️）又受限于字体支持和缩放模糊。
立即学习“前端免费学习笔记（深入）”；
- 用 SVG 内联图标：直接写在 HTML 里或通过
background-image: url("data:image/svg...")，然后用fill: currentColor继承文字色，暗色模式只需改color - 避免用
img标签 +float，因为img默认vertical-align: baseline，且加载失败时留白难处理 - 如果用字体图标（如 Font Awesome），确保引入时启用了
font-display: swap，否则首次渲染可能闪白或错位
