正确做法只有两种：

• 改容器为块级（如用 包含 ）
• 或用 display: inline-block / display: flex 等方式让父元素“既保持行内流又支持嵌套”

特别注意： 和 虽然常被当“行内用”，但它们本质是 inline-block，所以能设宽高、能包含伪元素、也能作为 flex item 安全使用。

用 display 切换类型时，要警惕隐式行为变化

把 改成 display: block，它就真变成块级了——会换行、能设宽高、能包 ；反过来把 设成 display: inline，它就失去换行能力，同时 width/height 失效，且不能再作为 flex 容器（display: inline 不触发 flex 上下文）。

更隐蔽的问题是：行内元素转 inline-block 后，HTML 源码里的换行符和空格会渲染成约 4px 的空白间隙。这不是 bug，是规范行为。解决它要么删 HTML 换行，要么父元素设 font-size: 0（记得子元素重设 font-size），要么直接上 display: flex ——后者现在基本是首选。

布局逻辑一旦脱离“默认 display 行为”，就要同步检查盒模型、流式关系、嵌套合法性——很多样式异常，源头只是忘了 display 已经悄悄改写了元素的底层角色。