columns与float互斥，因多栏布局要求内容保持连续文本流，而float使元素脱离文档流，故浏览器直接忽略float声明，仅按column-width或column-count自动分栏。
column布局里float为什么完全不起作用
因为CSS多栏布局（columns）和浮动（float）属于互斥的布局模型——浏览器在启用columns时，会强制将内容视为连续文本流，并禁用所有脱离文档流的行为，float正是其中之一。
这不是兼容性问题，而是规范定义：一旦父容器设置了column-count或column-width，其子元素的float声明会被忽略，计算样式中float值仍显示为left或right，但渲染引擎不执行浮动逻辑。
- 开发者工具里能看到
float属性被“划掉”（strikethrough），说明它被layout engine跳过 - 即使给子元素同时写
float: left和display: inline-block，也仅inline-block生效，float无效 - 这个限制对所有
float取值都成立：left、right、none之外的值（如inherit）同样被无视
写了float却看到文字环绕？那不是float在起作用
如果你在columns容器内放了一个img并设了float: left，结果文字看起来“环绕”了图片——这其实是columns自身的文本流分栏行为造成的视觉巧合，不是float生效了。
真正起作用的是：img作为内联替换元素，默认参与文本流；columns把整段文本（含图片）当作连续内容切分，图片随所在段落被分配到某一栏中，周围文字自然填充剩余空间。
立即学习“前端免费学习笔记（深入）”；
- 这种“环绕”无法控制断行位置，也不能让图片跨列；一旦图片高度超过单栏高度，就会被截断或撑高该栏
- 若换成
div并设float: left，它会直接退回到第一栏顶部，且不触发任何环绕效果 - 想实现可靠图文混排，应改用
shape-outside+margin，而非依赖已失效的float
为什么不能一边column分栏、一边用float做侧边栏
因为columns只作用于**块容器内的连续内容流**，它要求所有子元素都保持标准文档流地位。一旦插入position: absolute、display: flex或float元素，整个分栏平衡机制就崩溃——轻则内容溢出最后一栏，重则整列卡死、渲染停滞。
-
columns不支持“结构混合”：它不是grid/flex那样的通用容器，不能容纳定位、弹性或浮动子项 - 常见误操作：给
columns父容器加float，试图让它并排另一个导航栏——此时整个分栏容器自己变成浮动块，但内部仍不认子元素的float - 真要组合布局，必须分层：外层用
grid划分区域（如sidebar+article），再在article内部单独启用columns
替代方案：什么时候该放弃columns+float幻想
当你需要以下任一能力时，columns就不再是合适选择，硬套float只会让问题更隐蔽：
- 子元素需独立交互（如hover展开、JS动态增删）——
columns对DOM变动极其敏感，float又无法补救 - 列内要嵌套flex/grid布局（比如每栏放一个卡片列表）——直接导致分栏失效，浏览器可能静默降级为单栏
- 需要精确控制某一段落不出现在首栏（如“请勿拆分”提示）——
break-before: column可用，但float完全不参与这个控制链
这时候该切到display: grid，用grid-template-columns: repeat(3, 1fr) + gap，既能保留分栏视觉，又能自由嵌套、过渡、响应式控制——而不用在float和columns之间反复拉扯。
