CSS Float（浮动）

float 让元素脱离正常流并向左或向右「浮动」，直到触碰到父容器或另一个浮动元素的边缘。早期常用它做多栏布局和「文字绕图」；现代布局更多用 Flex 或 Grid，但浮动仍常用于图文混排和简单多列。

取值

• float: left — 向左浮动
• float: right — 向右浮动
• float: none — 不浮动（默认）

---

基本效果

• 浮动元素会脱离文档流，后面的块级元素会「顶上来」，可能被浮动元素挡住或从下方绕过（取决于是否清除浮动）。
• 行内内容（文字、图片等）会绕开浮动元素，形成「文字绕图」效果。

img {
  float: left;
  margin-right: 15px;
}

---

多列布局（传统用法）

.sidebar {
  float: left;
  width: 200px;
}

.main {
  margin-left: 220px;  /* 为侧栏留出空间，或 overflow: hidden 触发 BFC */
}

---

清除浮动（clear）

若父元素只包含浮动子元素，父元素高度会塌陷为 0（因为浮动不占流内高度）。需要「清除浮动」让父元素重新包住子元素。

1. clear 属性

给清除浮动元素（通常放在浮动元素后面）设 clear：

• clear: left — 左侧不能有浮动元素
• clear: right — 右侧不能有浮动元素
• clear: both — 两侧都不能有浮动元素（常用）

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

父元素加 class clearfix，用伪元素在最后插一个块，并 clear: both，父元素就会包含浮动高度。

2. 父元素 overflow: hidden / auto

给父元素设 overflow 不为 visible，会创建 BFC，父元素会计算浮动子元素高度：

.parent {
  overflow: hidden;
}

---

小结

• float: left / right 使元素浮动，脱离流，后续内容会绕排或顶上来。
• 父元素若只含浮动子元素会高度塌陷，需清除浮动：用 clear: both 的伪元素，或给父元素设 overflow: hidden（或其它 BFC 方式）。
• 复杂布局更推荐 Flex 或 Grid；浮动适合简单多列和图文绕排。

下一节学习 CSS 对齐。