浮动实现图标栏时，a标签须设为block或inline-block；需清浮动防塌陷，推荐display:flow-root；图标对齐用vertical-align；新项目优先用flex布局。
浮动实现图标栏时，a 标签必须设为块级或内联块
直接给 a 加 float: left 会失效，因为默认是内联元素，浮动对纯内联元素行为不可靠。浏览器可能忽略或渲染错位。
- 必须显式设置
display: block或display: inline-block（后者更安全，避免换行间隙） - 如果用了
inline-block，父容器里别留空格或换行，否则图标间会多出 4px 间距 - 用
float就得清浮动，否则父容器高度塌陷——常见表现是图标栏下面的内容往上顶
clear: both 清浮动不是万能解，现代项目优先用 BFC
很多人一见浮动就加 div + clear: both，但这是上世纪做法。它破坏语义，还容易漏写或写错位置。
- 更稳妥的是触发父容器 BFC：比如加
overflow: hidden、display: flow-root（推荐，语义清晰且无副作用） -
display: flow-root兼容性到 Chrome 64+/Firefox 58+，如果要支持 IE，才退回到overflow: hidden - 千万别在浮动元素自己上写
clear，那只是控制它和前面浮动元素的关系，不解决父容器塌陷
图标尺寸不一致？line-height 和 vertical-align 是关键
社交图标常混用字体图标（如 Font Awesome）、SVG 或图片，高度参差不齐，单纯浮动后会基线错位，看起来歪斜。
- 统一用
vertical-align: middle或vertical-align: top对齐（避免默认的baseline） - 如果图标是文字（如字母图标），设
line-height: 1防止行高撑开 - 所有
a设置固定width和height，再配合text-align: center居中内容，比依赖默认盒模型更可控
浮动方案现在还值得用吗？看场景再决定
浮动本意是图文环绕，硬拉来做导航栏或图标栏属于“借位使用”。它能跑通，但限制多、可维护性低。
立即学习“前端免费学习笔记（深入）”；
- 如果是新项目，直接用
display: flex更简洁：justify-content: space-between控制间距，align-items: center垂直居中 - 如果必须兼容 IE9 及以下，浮动仍是可行底线方案，但务必配好
display: flow-root或overflow: hidden - 注意：浮动元素脱离文档流，后续兄弟元素会“无视”它占位——这点在响应式断点切换时容易引发布局跳变
浮动做图标栏不是不能用，而是每一步都得手动补救。真正省事的，是搞清楚哪一步没对齐、哪一层没清浮动、哪个 display 没改到位。
