float无法自动均分是因为它不参与空间分配计算，仅脱离文档流贴边排列；所谓“各50%”需手动设置width且易受padding、border、内容撑开等影响而崩坏。
float 为什么算不出“平均”
浮动本身不参与空间分配计算，它只是让元素脱离文档流、贴边排列。所谓“两列各50%”，其实是你手动写了 width: 50%，浏览器照着执行——不是 float 在均分，是你在硬算。一旦加了 padding、border 或用了默认的 box-sizing: content-box，实际宽度就超了，最后一列必然掉行。
- 浮动没有“剩余空间”概念，不感知父容器尺寸变化，也不自动重算比例
- 子项宽度必须手算百分比，n 列就要写
100/n%，还不能四舍五入错（比如 33.33% 和 33.34% 累加会超 100%） -
float元素若内容撑开（如长文本、图片），width就失效，均分立刻崩坏
flex: 1 不等于 flex-fill，但效果接近
CSS 里没有原生的 flex-fill 属性（那是 Bootstrap 的类名），真正起作用的是 flex: 1，它是 flex-grow: 1、flex-shrink: 1、flex-basis: auto 的缩写。但要注意：flex-basis: auto 会让元素先按内容宽度占位，再分剩余空间——这正是“看着没均分”的根源。
- 要真均分，得写
flex: 1 1 0，强制忽略内容宽度，从零开始分剩余空间 - 如果父容器有
gap，子元素不用管间距，flex: 1 1 0仍能填满除去 gap 后的可用宽度 - 别给子元素设
width，哪怕width: 0都可能干扰flex-basis计算
IE11 下 flex: 1 为啥有时不均分
IE11 对 flex 缩写的解析不稳定，尤其遇到 flex: 1 这种省略 flex-basis 的写法时，常回退成 flex-basis: auto，然后按内容宽度分配——结果就是文字多的项变宽，文字少的被压缩。
- 必须显式写三值：
flex: 1 1 0，IE11 才认作 “基础宽度为 0，纯按权重分” - 避开
flex: 1 1 20%或flex: 1 1 auto，前者 IE11 当成固定基准，后者直接按内容宽算 - 如果还要兼容更老版本，
display: table+table-cell是最后防线，但无法响应式收缩
用 flex 实现均分时最容易漏掉的一行 CSS
就这一行：min-width: 0。它不起眼，但 Safari 旧版、部分 Android WebView 里，只要子元素内有长单词或 URL，flex: 1 1 0 就会被撑开，均分失效。
-
min-width: 0告诉浏览器：“别怕内容溢出，优先守宽度比例” - 配合
overflow: hidden或text-overflow: ellipsis，可安全截断而不破布局 - 这个规则对导航栏、卡片列表、标签页尤其关键——那些带图标或动态文本的项，最易中招
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
