父容器高度塌陷需用伪元素清除浮动：.tag-list::after { content: ""; display: table; clear: both; }；inline-block间隙用font-size:0解决；响应式推荐flex+flex-wrap，点击区域需box-sizing:border-box+min-width保障。
float 实现标签列表时，父容器高度塌陷怎么办
用 float 给每个标签加浮动后，常见现象是：父容器没高度，后面的内容直接叠上来了。这不是 bug，是 float 的天然行为——脱离文档流。
- 父容器必须主动“清除浮动”，否则无法包裹子元素
- 不要用
overflow: hidden硬撑（会意外裁剪position: absolute子元素或阴影） - 推荐在父容器末尾加一个清浮动的伪元素：
.tag-list::after { content: ""; display: table; clear: both; } - 如果父容器本身有
padding或border，这个方案不影响盒模型计算
inline-block 标签间有 4px 间隙，怎么去掉
这是 HTML 解析空白符（换行、缩进）导致的，不是 CSS 错误。所有浏览器都这样，和字体大小有关。
- 最稳的方式是把父容器的
font-size设为0，再给标签单独设回需要的字号 - 或者让标签的 HTML 写在同一行，消除换行符（可读性差，不推荐）
- 不要用
margin-left: -4px这类魔法数字，不同字体/缩放下会失效 - 注意：设
font-size: 0后，line-height和vertical-align行为也会变化，标签内文字需显式设置字号
移动端标签列表换行错乱，flex 更合适吗
float 和 inline-block 在响应式场景下确实容易失控：比如小屏下标签强行挤成一行、溢出容器，或换行后对齐发散。
-
display: flex+flex-wrap: wrap是更现代、可控的选择 - 父容器加
gap: 8px替代手动算 margin，且不会受空白符干扰 - 兼容性没问题：Chrome 29+、Firefox 28+、Safari 6.1+、iOS Safari 7.1+ 都支持
- 如果必须兼容 IE11，
flex仍可用，但gap要换成margin模拟，且注意 IE 对flex-wrap的 margin 处理有轻微偏差
标签点击区域太小，padding 加了却撑开换行
加 padding 后标签变宽，原本能并排 5 个，现在只能排 4 个——本质是盒模型计算没留余量。
- 所有标签必须统一用
box-sizing: border-box，否则width + padding + border会超预期 - 别只靠
width: 20%这类百分比，要预留间隙空间，比如设width: calc(20% - 8px)配合gap: 8px - 移动端建议最小点击区域 ≥ 44px，可以用
min-width: 44px+padding组合，而不是只依赖内边距 - 如果标签文字长度差异大，考虑用
flex: 1 0 auto让它们按内容伸缩，而非死守等宽
换行逻辑、点击热区、父容器包裹——这三个点只要漏掉一个，标签列表看着就“不太对”。尤其 box-sizing 和 gap 的配合，很多人调半天才发现是基础盒模型没统一对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
