“卡住”是后续浮动元素填入前矮列右侧空白所致，因float只贴边不等高；需box-sizing: border-box、calc宽度余量、margin-right分隔，并用flow-root替代overflow: hidden；现代布局应优先采用flex。
float元素高度不一导致“卡住”是怎么回事
所谓“卡住”，其实是后续浮动元素钻进了前面矮列右侧的空白区域，视觉上像被卡在半途——这不是渲染错误，而是float的原始行为：它只保证“贴边”，不保证“对齐底部”或“等高”。一旦某列内容少、高度矮，它右边就留下空隙，下个float: left元素会立刻上浮填进去。
父容器不塌陷是前提，但光靠overflow: hidden不够
很多人加overflow: hidden后发现父容器撑开了，但列还是错位，因为这个属性只解决父容器“看不见子项高度”的问题（触发BFC），并不约束子项自身高度差异。真正要防“卡住”，得让父容器能稳定容纳所有浮动项，且宽度计算不越界：
-
box-sizing: border-box必须设在每个浮动子项上，否则width: 50%+padding: 16px实际超宽，直接触发换行 - 两列总宽度建议留1px余量，比如用
width: calc(50% - 1px)，防浏览器像素舍入误差 - 避免在浮动项上用
margin-left分隔，IE下可能双倍；改用margin-right更稳妥 - 若父容器需显示下拉菜单、Tooltip等溢出内容，
overflow: hidden会裁剪它们，此时应换用display: flow-root
真要对齐底部，line-height和padding-bottom得配合用
单靠line-height只能统一单行文本的行框高度，对多行段落无效。如果目标是视觉上“底部对齐”，得手动补偿：
- 先观察各列文字底部到容器底的距离差，用开发者工具的“Layout”面板勾选
Show layout bounds最直观 - 给内容短的列加
padding-bottom（如padding-bottom: 24px），把文字“托高” - 必须配合
box-sizing: border-box，否则padding会让总高度超标 - 此法仅改善视觉，仍需
clearfix或flow-root确保父容器包裹完整
别硬扛，该换flex就换
如果你正在写新项目，或者需要响应式、动画、底部按钮对齐——继续调float和clear就是在重复造轮子。现代方案简单直接：
- 等高列：
display: flex+align-items: stretch（默认行为） - 底部对齐：
align-items: flex-end - 自动换行+响应式列数：
flex-wrap: wrap+flex: 0 0 minmax(280px, 1fr)) - 务必删干净所有
float: left和clear，它们和flex共存反而破坏布局
最容易被忽略的是：媒体查询里忘了重置父容器的BFC触发方式，PC端正常，一缩到平板尺寸，错位突然出现——这时候flow-root比overflow更可靠，因为它不干涉溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
