float: left的li换行后卡在矮项右边是因浮动脱离文档流致父容器高度坍缩，后续浮动元素上浮填补右侧空隙；需用display: flow-root/overflow: hidden/css clearfix触发bfc包裹浮动子项，再以padding-bottom配合box-sizing: border-box视觉对齐，现代布局应优先采用flex或grid。

为什么float: left的li换行后会卡在矮项右边

这不是bug，是float的设计逻辑：浮动元素脱离文档流，父容器高度坍缩；当某个

内容少、高度矮，它右侧就留下空白，后续浮动项会“上浮”钻进这个空隙——视觉上就是第5个li没换行，反而挤在第3个右边。

父容器必须触发BFC，否则所有对齐都是徒劳

错位常伴随父

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

高度塌陷，后续内容被吸进浮动区。关键不是给每个
• 加clear: both（那会让每项都独占一行），而是让
  能“包住”所有浮动子项：
  • display: flow-root是专为此设计的，无副作用，Chrome 58+/Firefox 53+/Safari 10.1+ 全支持
  • overflow: hidden最简，兼容IE6+，但可能意外裁剪box-shadow或下拉菜单
  • 伪元素clearfix：.clearfix::after { content: ""; display: table; clear: both; }，适合需兼容IE8的老项目
  • 避免overflow: auto——旧版Safari/IE可能触发滚动条或重绘抖动

  别硬设height，用padding-bottom拉齐文字底部基线

  直接写height: 200px极易出问题：内容变长时溢出，变短时留白，响应式缩放后更难控制。真正可行的是用padding-bottom把文字“托高”对齐：

  • 测量各块文字底部到容器底的距离差
  • 对内容短的
  • 增加padding-bottom（比如多加16px）
  • 必须配合box-sizing: border-box，否则padding会撑大总尺寸
  • 该法只改善视觉对齐，不解决父容器塌陷，仍需上一步触发BFC

  现代项目应直接切到flex或grid布局

  浮动不是为栅格系统设计的。现在遇到“并排+自适应+等高”，第一反应不该是调float和clear：

  • display: grid：三行代码搞定 —— display: grid + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))) + align-items: start
  • display: flex：flex-wrap: wrap + align-items: stretch（默认），子项用flex: 1 1 280px控制宽度
  • 两者天然支持内容自适应高度，无需手动干预padding或height
  • 最容易被忽略的是响应式断点里的塌陷——PC正常，一缩到平板尺寸，错位突然出现，因为媒体查询里忘了重置父容器的BFC触发方式

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！