浮动与清除

浮动最初用于让文字环绕图片，后来被广泛用于多栏布局。浮动元素离开普通块布局的直接占位方式，但后续行内内容会环绕它；父元素高度是否包含浮动，取决于其格式化上下文。

.article-image { float: inline-start; margin-inline-end: 1rem; }
.after-image { clear: inline-start; }
.flow-root { display: flow-root; }

现代新布局优先使用 Flexbox 或 Grid，维护旧页面时仍需理解浮动和 clear。display: flow-root 可以建立包含浮动的块格式化上下文，比添加无意义的空清除元素更直接；但它不会自动修复浮动顺序和响应式宽度问题。

实验与练习

让一张图片浮动并放入多段文字，观察后续内容的环绕和父元素背景高度。分别使用 clear、overflow 和 flow-root 处理父元素包含，记录每种方式的副作用。

可运行微实验：先测量再改变约束

把示例放入 320px 宽的容器，打开 Computed/Layout 面板记录 content、padding、border、margin、主轴尺寸和网格线。每次只改变一个属性：box-sizing、min-width、flex-basis、grid-template-columns 或定位方式。记录元素自身尺寸、邻居位置和是否溢出，解释是哪条约束改变了结果。

常见错误

• 把浮动当作现代二维布局首选。
• 只清除兄弟元素，却没有处理父元素高度。
• 使用 overflow: hidden 清除浮动，却意外裁剪阴影或下拉内容。

本章回顾

本章从盒模型计算走到 Flexbox、Grid、定位和浮动。遇到布局问题时，先确认盒模型和格式化上下文，再选择一维、二维或脱离正常流的方案。

进入第四章：响应式设计

练习

1. 用最小输入复现“浮动与清除”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案