max-width不生效的主因是父容器无约束、元素为inline类型或被其他CSS规则覆盖；它仅对块级元素或display设为block/inline-block的元素有效。
max-width 设置后不生效的常见原因
直接写 max-width: 600px 却没反应？大概率是父容器没给约束，或者元素本身是 inline 类型（比如 <span></span>），又或者被 width、flex、float 等其他规则覆盖了。
-
max-width只对块级元素或设置了display: block/inline-block的元素起作用 - 如果父容器宽度无限（比如未设
width的或<div>），子元素即使设了 <code>max-width，也可能因内容撑开而“看起来没限制” - 在 Flex 布局中，
max-width默认会被flex-shrink和flex-basis干扰，需配合flex: 0 1 auto或显式设flex-shrink: 0
响应式场景下 max-width 和 width 的配合逻辑
纯用 width: 100% 会随容器拉伸到失控；只用 max-width 又可能在小屏下太窄。真正稳的写法是两者共存：
img {
width: 100%;
max-width: 800px;
}
-
width: 100%让它能收缩适应小屏 -
max-width在大屏下兜底，防止图片/容器过宽 - 注意：这个组合对
<img alt="CSS如何限制最大宽度防止过宽_使用max-width属性适配容器" >、<section></section>、<article></article>都有效，但对<table> 要小心——表格默认忽略 <code>max-width，得加table-layout: fixedmax-width: none 和 0% 这类值的实际表现
max-width: none是显式取消限制，但别以为它等于“不限制”就安全——某些旧版 IE（如 IE8）根本不认none，得用max-width: 9999px替代。-
max-width: 0%不是“不允许显示”，而是强制缩成 0（除非内容有最小尺寸，比如文字），基本等于隐藏，慎用 -
max-width: fit-content在现代浏览器可用，但 Safari 对 flex 容器内支持不稳定，建议只用于简单块级流式布局 - 百分比值（如
max-width: 80%）始终相对于父容器宽度计算，不是视口，这点和vw不同
和 container 查询或 clamp() 混用时的优先级陷阱
现在有人用
@container或clamp()替代传统媒体查询，但max-width和它们不是互斥关系，而是叠加生效，容易误判谁在控制最终宽度。立即学习“前端免费学习笔记（深入）”；
- 如果同时写了
width: clamp(300px, 80vw, 1200px)和max-width: 960px，实际宽度取两者更小的那个结果 - 在 container 查询里，
max-width是查询条件（比如@container (max-width: 600px)），不是样式属性，别写混位置 - Chrome DevTools 的 computed 面板里，要展开「used values」才能看到最终生效的宽度值，光看「styles」标签页容易漏掉层叠影响
真正难的不是写对那行
max-width，而是搞清它在哪一层被谁改了——父容器、display 类型、flex 属性、甚至 box-sizing 都可能悄悄绕过你的预期。 -
