float虽非首选，但因老项目维护、调试及面试需求仍需掌握；其核心问题在于父容器塌陷、列掉行、小屏错位等副作用，需配合box-sizing、清除浮动及calc()等细节规避。
为什么 float + 百分比现在还值得学
它不是首选方案，但你在维护老项目、调试遗留代码、或面试被问到“不用 flex 怎么做两栏”时，绕不开 float。现代浏览器仍完全支持它，问题不在语法失效，而在副作用容易被忽略——比如父容器塌陷、列掉行、小屏错位。
写 width: 25% 却没对齐？先检查这三件事
百分比本身没错，错在它和默认盒模型、浮动机制的配合方式。
-
box-sizing没设成border-box：padding 和 border 默认不计入width，.col { width: 25%; padding: 10px; }实际宽度远超 25% - 父容器没清除浮动：
.row高度为 0，后续内容从顶部“钻出来”，典型表现是背景色没撑开、边框消失 - 列之间有空格或换行符：HTML 中的文本节点（哪怕只是回车）会被渲染成空白，可能让最后一列掉到下一行；解决方法是把
.col标签写成紧挨着的<div class="col-4"></div> <div class="col-4"></div>，或用注释消除空格
移动端切单栏时，float: none 不够，还得动 width 和 overflow
很多人只写 float: none，结果小屏下依然错位——因为父容器还在用 overflow: hidden 清除浮动，而这个规则没被媒体查询覆盖。
- 必须同时重置
.col的width为100%，否则它们会继承桌面端的 25% / 33.33% 等值 -
.row的overflow: hidden在小屏下要改成overflow: visible或直接删掉，否则可能截断内容 - 断点别硬套
768px；先看文字是否开始挤压换行，再定@media (max-width: 640px)这类更贴内容的值
calc() 比手算 33.333% 更可靠
浏览器对小数像素四舍五入，多个 width: 33.33% 加起来可能变成 99.99% 或 100.01%，导致最后一列掉行。
- 用
width: calc(100% / 3)替代width: 33.33%，让浏览器实时计算，避免精度误差 - 如果列有固定 padding，可写成
width: calc((100% - 30px) / 3)（假设左右各 15px padding） - 注意
calc()内部运算符前后必须有空格，calc(100%/3)是无效语法
真正难的不是写出能跑的 float 栅格，而是判断什么时候该放弃它——当你要加垂直居中、等高列、响应式顺序重排时，float 的补丁会越打越多。这时候不是调样式的问题，是布局模型选错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
