不推荐在新项目中使用 float 做两栏布局，因其易导致父容器塌陷、清除浮动易漏、响应式维护困难；应优先选用 flexbox 或 grid。
用 float 做两栏布局，现在还行不行？
能做，但不推荐在新项目里用。现代浏览器都支持 flexbox 和 grid，float 本意是让文字绕排图片，强行用来做整体布局，会带来一连串副作用：父容器高度塌陷、清除浮动容易漏、响应式断点要反复重写样式。
如果你维护老项目，或者面试被问到“怎么用浮动实现两栏”，那它仍是必须掌握的技能；否则，直接上 display: flex 更省心。
float 两栏的最小可行结构长什么样？
核心就三块：一个包裹容器（.container），左栏（.sidebar），右栏（.main）。宽度用百分比，比如左栏 25%、右栏 75%，再加 float: left 就能并排。
常见错误现象：.container 高度为 0，内容从下面“钻出来”——这是典型的浮动未清除。
- 左栏和右栏都必须设
float: left（不能一个左一个右，否则小屏下容易错位） - 给
.container加overflow: hidden或伪元素::after清除浮动，二者选其一即可 - 别忘了设
box-sizing: border-box，否则 padding 会让百分比超 100%
.container {
overflow: hidden;
}
.sidebar { width: 25%; float: left; }
.main { width: 75%; float: left; }
* { box-sizing: border-box; }
加响应式：什么时候该切单栏？怎么切？
多数博客内容在手机上阅读体验优先，所以主流做法是：屏幕宽度 ≤ 768px 时，两栏变单栏，float 全部取消，让 .sidebar 和 .main 自然流式堆叠。
关键不是“怎么写媒体查询”，而是“断点值怎么定”。别硬套 max-width: 768px，先看内容——如果标题文字在 640px 就开始换行挤压，那就该在 640px 切。
- 清除浮动的规则也要放进媒体查询里，否则小屏下仍可能塌陷
- 移动端不需要
float，直接设float: none; width: 100% - 注意
margin和padding在小屏下是否过大，常需重置
@media (max-width: 640px) {
.sidebar, .main { float: none; width: 100%; }
.container { overflow: visible; }
}
为什么你写了百分比，实际宽度还是不准？
最常被忽略的是默认 margin/padding 和继承字体大小影响行高，进而撑开容器高度，间接干扰浮动排列。另外，部分浏览器对子元素 width: 25% 的计算会因小数像素四舍五入产生 1px 偏差，导致右栏掉行。
解决思路不是死磕百分比精度，而是加容错：
- 用
calc(25% - 1px)给左栏留点余量（配合右栏calc(75% + 1px)） - 确保所有直接子元素没意外的
margin，特别是h1、p的默认外边距 - 检查是否用了
rem或em单位定义内边距，它们会随根字体缩放，破坏百分比稳定性
浮动布局真正难的不是写出来，是写完之后改一处，其他地方全乱——这种连锁反应，在 flex/grid 里基本不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
