浮动元素错位的根本原因是父容器未包住浮动子元素导致高度塌陷，进而引发换行错乱、列高不齐等问题；需通过触发BFC、正确使用clear、控制列宽及转向Flex/Grid实现可靠布局。
浮动元素为什么总是错位
浮动错位根本原因不是写法不对，而是父容器没“包住”浮动子元素——float会让元素脱离文档流，父容器高度塌陷，后续内容或兄弟浮动块就可能顶上来、挤偏、换行错乱。
常见现象包括：最后一列突然掉到下一行、相邻列高度不一致导致底部参差、清除后仍有缝隙。
- 没给父容器触发 BFC（比如没设
overflow: hidden或display: flow-root） -
clear放错了位置——不是加在浮动元素自己身上，而是加在需要“换行开始”的那个元素上 - 列宽 + 间距总和超过 100%，尤其用了
box-sizing: content-box时，padding和border会撑出额外宽度
clear 怎么用才真正起作用
clear 的作用是“让当前元素的上边框不与前面的浮动元素同一水平线”，它不控制高度，也不拉高父容器。真正起效的位置是：需要另起一行的那列的开头，或者每行第一列之前。
- 三列布局中，若每行显示三列，第 4 个元素要清左浮动：
clear: left - 更稳妥写法是用伪类为每行首列加
clear: left，例如：.col:nth-child(3n+1) { clear: left; } - 避免对每个浮动项都写
clear: both，这会让所有列强行独占一行
等高效果其实靠的是视觉欺骗
纯 float 无法让不同内容长度的列自动等高。所谓“等高布局”，实际是靠背景色、边框或阴影延伸到底部来制造视觉一致，内容区本身高度仍由自身决定。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
background-color，子列设透明背景，靠父容器背景“透出”营造等高感 - 用负
margin+ 正padding模拟（如margin-bottom: -9999px; padding-bottom: 9999px;），但仅适用于固定高度或内容可控场景，现代项目慎用 - 真正等高请转向
display: flex或display: grid，float本身没有等高能力
兼容性与现代替代方案的取舍点
IE8+ 能跑通 float + clear 布局，但 IE6/7 对 clear 解析有偏差（比如忽略 clear: both 在某些嵌套下），而现代浏览器里它只是“遗留可用”，不是推荐路径。
- 如果必须支持 IE9 以下，需配合
zoom: 1触发 hasLayout，且列宽务必用像素或精确百分比 - Flex 布局中
align-items: stretch天然等高，flex-wrap: wrap可模拟多行浮动流 - Grid 中用
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))更灵活，且无清除逻辑负担
现在还硬用 float 做多列，多数时候不是为了兼容，而是卡在老系统动不了——这时候得盯紧父容器是否塌陷、列宽是否超限、clear 是否落在该清的位置，而不是指望它自动变聪明。
