float并排掉下来是因未处理border/padding叠加及父容器塌陷，需box-sizing:border-box和清除浮动；flex边框重叠是相邻渲染叠加，gap不包含边缘；移动端错位源于亚像素舍入，应坚持整数百分比或flex:1。
float并排时盒子总掉下来？记得清除浮动和盒模型对齐
用 float 实现两栏并排，最常见问题是右边盒子换行、间隙错位，根本原因不是float写错了，而是没处理好 border 和 padding 的宽度叠加，以及父容器高度塌陷。
- 必须给两个子盒子加
box-sizing: border-box，否则width: 50%+padding: 10px就超100%，直接挤到下一行 - 父容器要清除浮动，否则高度为0，后续内容会上移——推荐用
overflow: hidden或伪元素::after { content: ""; display: table; clear: both; } - 避免用
margin模拟间距，它会进一步撑宽；如需间隔，改用padding配合border-box，或把间隔做在内部元素上
flex并排后边框重叠或留白？检查justify-content和gap行为
display: flex 看似简单，但 gap、justify-content 和 border 组合容易出视觉偏差：比如设了 gap: 1px 却发现实际空隙是2px，或者左右边框“加粗”了。
-
gap是在 flex 项之间插入空白，不包括容器边缘，所以两边紧贴父容器是正常的；如需内边距，给父容器加padding - 如果两个盒子都有
border: 1px solid #000，并排时相邻边框会“视觉合并”，看起来像2px粗——这不是bug，是渲染叠加；解决方法是只给左盒border-right，右盒border-left，或统一用outline替代 - 别混用
justify-content: space-between和固定width，它会强行拉伸间隙，导致尺寸失控；老老实实用flex: 1或width: 50%更可控
border-box没生效？确认CSS优先级和继承链
写了 box-sizing: border-box 却发现 padding 还是撑开宽度，大概率是样式被覆盖或没命中目标元素。
- 浏览器默认样式表里
input、textarea等表单控件的box-sizing是content-box，且权重高，必须显式重写并提高选择器特异性（比如加!important或用input, textarea { box-sizing: border-box; }） - 如果父容器用了
transform或will-change，某些旧版 Chrome 下box-sizing可能失效，临时方案是加backface-visibility: hidden - 用开发者工具检查计算后的
box-sizing值，别只看源码——它可能来自 reset 库、框架默认样式，或被更高优先级规则覆盖
移动端双栏错位？viewport和缩放触发的像素舍入问题
PC上看严丝合缝的两个50%盒子，在手机上左右各多出1px空白或重叠，通常不是代码逻辑问题，而是设备像素比+浏览器舍入策略导致的亚像素渲染误差。
- 避免用小数百分比，比如
width: 49.5%—— 移动端渲染时会四舍五入成49px或50px，累积误差明显；坚持整数百分比或用flex: 1 - 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在，否则 iOS Safari 可能以980px宽度渲染，再缩放，放大亚像素误差 - 如果必须精确控制边框/间距，用
rem或em替代px，配合根字体大小动态适配，比硬写像素更鲁棒
真正麻烦的不是写法本身，而是不同浏览器对 box-sizing 的初始值、flex gap 的兼容性、以及缩放下像素舍入的不可预测性——调试时得盯着真实设备看，模拟器经常骗人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
