超链接点击没反应通常因父容器塌陷导致，浮动元素脱离文档流后若父容器未清除浮动或设高，则实际高度为0，a标签虽渲染但点击区域失效；应优先用::after伪元素清除浮动，而非overflow:hidden或clear:both。
超链接点击没反应？先查父容器是否塌陷
浮动元素脱离文档流后，如果父容器没有设定高度或清除浮动，就会发生塌陷——视觉上内容还在，但父容器实际高度为0。这时候 a 标签虽然渲染出来了，但点击区域可能落在“空盒子”里，自然点不中。
常见错误现象：inspect 看到 a 元素在 DOM 中存在，:hover 也生效，但点击无跳转；或者只在文字边缘能点中，稍偏一点就失效。
- 用浏览器开发者工具选中父容器，看蓝色高亮区域是否包裹住了浮动子元素
- 临时加一句
border: 1px solid red到父容器，立刻暴露塌陷问题 - 别急着改
a的z-index或position，90% 是布局塌陷导致的假性失效
清除浮动该用 clear 还是 ::after？
clear: both 本身不解决父容器塌陷，它只是让后续元素避开浮动块；真正要撑开父容器，得让父容器“感知”到浮动子元素的存在。
推荐用伪元素清除法，兼容性好、无额外 HTML、不影响语义：
.container::after {
content: "";
display: table;
clear: both;
}
- 必须写
content: ""，否则伪元素不生成 -
display: table比block更稳妥，避免某些 IE 下 margin 双倍问题 - 不要用
overflow: hidden代替——它虽能触发 BFC 帮助撑高，但会意外裁剪position: absolute子元素或阴影
Flex/Grid 布局下还用清浮动吗？
不用。一旦父容器设了 display: flex 或 display: grid，子元素无论是否浮动，都不会导致父容器塌陷。浮动在 Flex/Grid 容器中基本失效（仍会脱离文档流，但不影响父高）。
但要注意：如果你混用浮动和 Flex，比如给某个 flex-item 加了 float: left，反而可能破坏对齐或引发渲染异常。
- 现代项目优先用 Flex/Grid 替代浮动做布局，一劳永逸避开清除问题
- 若必须兼容老代码，清除浮动仍是必要步骤，不能依赖
display: flex“顺带解决” - 检查 CSS 优先级——万一你写了
.container { display: flex }，却被更高权重要求覆盖回block，清除逻辑就又得回来
a 标签失效的其他干扰因素
即使浮动已清除，a 仍可能点不动。这时候要排查层叠上下文和 pointer-events。
- 父容器或遮盖层有
pointer-events: none，整个区域都不响应鼠标事件 - 浮动元素上浮后盖住了
a，但没设z-index，渲染顺序靠后（注意：浮动本身不创建新层叠上下文） -
a被设了display: block但没给宽高，且内部只有空格或换行符，实际可点击区域为0 - JavaScript 里用了
event.preventDefault()却没判条件，把所有a点击都拦了
复杂点在于：这些因素常和浮动塌陷共存，容易误判根源。建议按“布局 → 层叠 → 事件绑定”顺序排查，别一上来就翻 JS 逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
