浮动元素宽度溢出的典型表现是多个float:left元素并排时换行或撑破容器，主因是box-sizing:content-box将padding和border计入width之外，须对浮动元素显式设box-sizing:border-box。

flex子元素长文本撑破容器时，需在子元素上设word-break:break-all和overflow-wrap:break-word，并配合width/max-width及min-width:0以允许压缩换行。

核心是用auto-fit配合minmax(280px,1fr)实现列数自适应：每列最小280px、最大均分剩余空间；auto-fit动态压缩空轨道，视觉更紧凑；需设display:grid、避免固定卡片宽高、慎用line-clamp、断点仅调minmax第一参数，注意gap被overflow:hidden隐藏的常见问题...

width:100%撑破容器是因默认box-sizing:content-box导致总宽=100%+padding+border；全局设,::before,*::after{box-sizing:border-box}可彻底解决，且为flex/grid布局刚需。

max-width是防止撑破容器的第一道防线，仅限制最大宽度而不强制变宽；需配合width:100%才能实现随父容器缩放但有上限的效果，单独使用对默认width:auto的块级元素无效。

两列等分应优先用grid的1fr1fr，语义清晰且不受内容干扰；若用flex:1，需确保父容器display:flex、子元素无固定宽度，并设min-width:0防长内容撑破。