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