第11周笔记

第11周笔记

一、浮动布局的自动换行机制

现象

• 父容器 .main 宽度 800px，四个子元素 .A .B .C .D 均设置 float: left，每个宽度 400px。
• 实际渲染结果：第一行显示 .A 和 .B，第二行显示 .C 和 .D，形成 2×2 网格。

原理

• 浮动元素会依次排列在当前行的可用空间内。
• 当当前行剩余宽度不足以容纳下一个浮动元素时，该元素会自动换行到下一行开始位置。
• 本例中：
  • 第1个浮动 .A 占据 400px，行剩余 400px。
  • 第2个浮动 .B 正好占满剩余 400px，行满。
  • 第3个浮动 .C 发现当前行（第一行）已无空间，于是换到第二行开头。
  • 第4个浮动 .D 紧随 .C 之后放在第二行。

与 flex-wrap: wrap 的区别

• 浮动换行是被动的（由宽度不足触发），且不能自动调整对齐。
• Flexbox 的 flex-wrap: wrap 配合 justify-content 可更灵活控制换行后对齐方式，但浮动布局在旧项目中仍有应用。

---

二、固定高度避免浮动父容器塌陷

背景知识回顾（简要）

• 浮动元素会脱离文档流，导致父容器高度塌陷（父容器高度变为 0，除非内部有非浮动内容撑开或清除浮动）。

本例中的特殊处理

css

.main {
  height: 800px;   /* 父容器固定高度 */
}

• 由于父容器 .main 的 height 被显式设置为 800px，即使内部全是浮动元素，父容器依然保持该高度，不会出现塌陷。
• 此时不需要使用 clearfix 或 overflow: hidden 来清除浮动。

适用场景

• 当父容器高度已知且固定（例如设计稿精确控制）时，可以直接设置高度来规避浮动塌陷问题。
• 若父容器高度需要由内容动态撑开，则仍需清除浮动。