优先选 column-width：它让内容自适应容器宽度，响应式更可靠；column-count 则强制分几列，窄屏下容易产生超窄列或横向滚动。
多列文本用 column-count 还是 column-width？
二者不能共存，浏览器会忽略后声明的那个。实际开发中优先选 column-width：它让内容自适应容器宽度，响应式更可靠；column-count 则强制分几列，窄屏下容易产生超窄列或横向滚动。
常见错误是写成：column-count: 3; column-width: 150px;——此时 column-count 生效，column-width 被丢弃。
- 想固定列数（如打印样式），用
column-count - 想保证每列可读宽度（如新闻正文），用
column-width - 两者都设时，以 CSS 书写顺序为准，后写的生效
文字跨列断裂、标点孤悬怎么修？
CSS 多列默认不处理断行语义，中文常出现单个标点在行首、或“的”“了”单独占一行。需手动启用语言敏感断行：
column-break-inside: avoid; 防止段落被硬切成两列（但对 inline 元素无效）；真正起作用的是：
立即学习“前端免费学习笔记（深入）”；
-
hyphens: auto;+ 指定lang="zh"属性，触发浏览器中文连字符逻辑（Chrome/Firefox 支持较好） -
word-break: keep-all;阻止中文在字间断行（比normal更保守） - 避免在
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11815" title="CDP浏览器大师"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="CDP浏览器大师" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11815" title="CDP浏览器大师">CDP浏览器大师</a> <p>CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。</p> </div> <a href="/xiazai/skill11815" title="CDP浏览器大师" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>内嵌<span></span>或<em></em>，它们可能被截断到不同列
图片/块级元素卡在列中间出不来？
默认情况下，<img alt="html5布局代码多列文本流布局_html5布局代码多列流法【教程】" >、<figure></figure> 等块级元素会被当作“不可分割单元”，若高度超过当前列剩余空间，整体会被推到下一列顶部，造成大片空白。
解决方法只有两个：
- 加
break-inside: avoid;—— 强制该元素不跨列，但它会整体挪到新列开头（适合小图） - 改用
display: inline-block;+vertical-align: top;—— 让图片变成行内流体，随文字自然分布（适合图文混排） - 绝对不要给多列容器设
height，否则内容溢出直接被裁剪
Firefox 和 Safari 对 column-rule 渲染不一致？
是的。column-rule 在 Firefox 中始终居中于列间隙，Safari（尤其旧版）会偏右几像素，且 column-rule-style: dashed 在 Safari 中可能显示为实线。
稳妥做法：
- 只用
solid样式，宽度不超过1px - 避免依赖
column-rule-offset（仅 Chrome 支持） - 需要精确分隔线时，放弃
column-rule，改用伪元素 + 绝对定位模拟
多列布局真正的难点不在写法，而在内容不可控——用户粘贴的 Word 文档、带内联样式的富文本、未闭合的 HTML 标签，都会让 column-fill 行为失常。上线前务必用真实数据压测。
