column-count专用于文本流分栏，如新闻正文；结构化分栏应选flex或grid：flex适合主辅两栏，grid适合等宽卡片布局，混用或在flex/grid容器中使用column-count会导致失效。
别折腾 float 清浮动、别硬算百分比 width、别在 column-count 容器里套 flex——多栏布局翻车，90% 是因为没分清「文本流分栏」和「结构化分栏」该用什么方案。
column-count 适合长文章自动断行，不是用来排导航或卡片
新闻、博客正文这类纯文本流，直接用 column-count 最省心。它不改 DOM 顺序、不影响屏幕阅读器、打印也友好。
-
column-count: 3是“期望栏数”，实际栏数由column-width和容器宽度共同决定；设了column-width: 240px后，column-count可能被浏览器忽略 - 父容器必须是
display: block或inline-block；如果外层用了display: flex或display: grid，column-count直接失效 - 防标题/图片被劈开：给
h2、figure、blockquote加break-inside: avoid，别只写h2忘了figure - 响应式降级要从
column-count: 1开始写，用@media (min-width: 768px)逐步加栏，避免小屏强行三栏导致字太小
flex 布局适合主辅分明的左右分栏（比如文章页+侧边栏）
左导航固定宽、右内容自适应，三行 CSS 就能稳住，且移动端 display: none 左栏后，右栏自动占满。
-
.left { width: 240px; flex-shrink: 0; }——flex-shrink: 0比min-width: 240px更可靠，后者在 flex 容器中常被忽略 -
.right { flex: 1; }—— 等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0;，不要额外设width，否则和 flex 冲突 - 所有栏必须是
.container的**直接子元素**；嵌套一层div就会打断 flex 作用域 - 别把
display: flex直接加在<main></main>上——<header></header>和<footer></footer>会被拉伸变形；应外层用flex-direction: column控制垂直流向，<main></main>再单独设 flex
grid 布局适合固定栏目数的等宽/不等宽结构（比如页脚、产品卡片）
三栏页脚、四列服务介绍、五张产品图并列——grid 写法最直观，不用操心换行逻辑，也不依赖 DOM 顺序。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: repeat(3, 1fr)表示严格三等分；想响应式退为单列，直接@media (max-width: 768px) { grid-template-columns: 1fr; } - 列间距统一用
gap: 1rem，别用margin—— 后者会干扰轨道计算，还可能触发 margin collapse - 固定左栏 + 弹性中栏 + 固定右栏：写成
grid-template-columns: 240px 1fr 80px，别混用width和flex - IE11 不支持
gap和1fr，真要兼容，得回退用grid-column-gap+ 像素值，且去掉1fr
最容易被忽略的共性坑：盒模型和嵌套干扰
无论用 flex 还是 grid，只要子项里混了 float、position: absolute 或没重置 min-width，布局立刻失稳。
- 全局加
* { box-sizing: border-box; }，否则padding和border会让宽度失控 -
button、input这类替换元素默认有min-width: min-content，想让它 flex 均分，必须显式写min-width: 0 - 旧代码残留
float时，父容器要加display: flow-root或overflow: hidden，否则 flex 子项会被浮动元素干扰 - Grid/Flex 容器里别再嵌套另一个 Flex 容器来“微调”对齐——语义混乱，调试时根本找不到原因
