浮动元素宽度算错的根本原因是盒模型未统一、HTML空格干扰及width未显式设置；必须同时应用box-sizing:border-box、显式width（如calc）、父容器font-size:0三措施，缺一不可。
为什么float元素宽度会算错
不是浏览器算错了，而是你没管住它的盒模型和HTML空格。float: left本身不产生溢出，但width + padding + border + HTML换行空格加起来，轻轻松松超100%。开发者工具里看Computed width，经常发现“25.5%”“104px”这种诡异数字——那多出来的0.5%就是padding/border没设box-sizing: border-box，那4px就是换行符被当成了inline空格。
必须同时改的三处地方
只调一个属性，问题照旧。以下三项缺一不可：
-
box-sizing: border-box加在所有浮动子项上：否则width: 25%+padding: 8px= 实际占宽超25% - 浮动子项显式写
width：别信width: auto，它会随内容撑开；4列均分就用width: calc(25% - 8px)（假设左右各4px margin） - 父容器设
font-size: 0：干掉HTML换行符产生的空格；然后每个子项必须重设font-size，比如.item { font-size: 14px; }，漏一个文字就没了
响应式下浮动错位怎么修
媒体查询里只写clear: both是无效操作。clear不解除float，它只是让当前元素避开上方浮动兄弟。小屏错位根源是float还在生效，父容器依然塌陷。
必须同步重置：
立即学习“前端免费学习笔记（深入）”；
-
float: none：这是前提，否则它还在飘 -
width: 100%：避免width: 50%在窄屏下撑破容器 -
margin-right: 0：清除原浮动布局留下的右侧外边距，否则换行后右边留白
注意：width: 100%比width: auto更可控；如果父容器用了padding，确认它是否设了box-sizing: border-box，否则width: 100%会叠加padding变宽。
现代项目里别硬扛float
flex或grid子项上写float根本不起作用——它们不参与浮动规则。这意味着：
-
display: flex父容器里，float: left会被忽略，自然不存在塌陷、间隙、换行错位 -
display: grid同理，float失效，列轨道由grid-template-columns定义，宽度可控 - 如果你还在维护老代码，优先用
display: flow-root替代overflow: hidden触发BFC，语义清晰且不裁剪绝对定位内容
真正难处理的不是float本身，而是它和box-sizing、HTML空格、响应式断点之间的隐式耦合。每改一处，都要去Computed面板确认实际生效值，而不是只看Styles里写了什么。
