text-overflow:ellipsis仅对单行生效，多行需用-webkit-line-clamp；其要求display:-webkit-box、-webkit-box-orient:vertical、整数行数及明确高度限制，且仅WebKit/Blink内核支持，Firefox等需降级处理。

flex-grow先减去各子项基准尺寸再按比例分配剩余空间；flex-shrink在主轴空间不足且总基准宽超容器时生效，受min-width和不可折行内容影响；二者共存需谨慎设值，避免抖动；flex-basis优先级高于width但max-width仍限制最终尺寸。

flex布局更健壮：设父容器min-height:100vh、flex-column，main加margin-top:auto推footer到底部；absolute定位需预留空隙且不自适应，仅适用于高度固定场景。

父容器不自动撑开浮动子元素是因为浮动元素脱离普通文档流，导致高度塌陷；overflow:hidden能清除浮动但有裁剪副作用；推荐用display:flow-root创建无副作用的BFC，或直接改用flex/grid布局。

外层容器用padding、内层元素用margin。这最可控且符合盒模型直觉；反用易致margin合并、塌陷或尺寸模糊，推荐用gap替代margin实现可靠间距。

flex卡片错位因align-items:stretch拉伸且无高度约束，应设align-items:flex-start并用margin-top:auto钉住底部；grid中优先用auto-fit填满整行，gap替代margin实现干净间距；IE11需降级为-ms-flexbox或单列布局。