浮动与多列布局

约 311 字大约 1 分钟

布欧-Lewyon

2026-05-16

首页 › CSS › 布局 › 浮动与多列布局

浮动 float

float 最初用于文字环绕图片，后来被用于页面布局。现代布局推荐 Flexbox/Grid，但理解 float 仍有必要（旧代码维护 + 文字环绕场景）。

基础用法

img {
  float: left;    /* 左浮动 */
  margin-right: 16px;
}

clear 清除浮动

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 或 */
.clearfix {
  overflow: hidden;  /* 触发 BFC */
}

多列布局

CSS3 多列布局将内容分为多列（类似报纸）：

.article {
  column-count: 3;           /* 固定 3 列 */
  column-width: 200px;       /* 每列最小 200px（浏览器自动调整列数）*/
  column-gap: 32px;          /* 列间距 */
  column-rule: 1px solid #ddd; /* 列分割线 */

  /* 跨列 */
  h1 { column-span: all; }   /* 标题跨所有列 */
}

浏览器自适应列数

.auto-columns {
  column-width: 300px;  /* 无 count，由宽度自动决定 */
  /* 容器 700px → 2 列 */
  /* 容器 1000px → 3 列 */
}

小结

属性	用途	现代替代
`float`	文字环绕	`float`（场景独特）
`clear`	清除浮动	BFC / Flexbox
`column-count`	固定列数	CSS Grid
`column-width`	自适应列数	CSS Grid `auto-fill`