浮动为什么会造成高度塌陷？清除浮动有哪些方式，和 BFC 有什么关系？
先理解原理和示例，再练习完整口述与追问。
回答要点
浮动元素脱离常规流参与布局，父元素计算高度时不包含它，于是塌陷。解决方式：后面元素 clear、伪元素 clearfix、让父元素形成 BFC（首选 display: flow-root）。今天布局用 Flex/Grid，浮动主要用于文字环绕。
原理拆解
浮动元素向左或向右移动，后续行内内容会环绕它，但它不再撑开常规流中的父块高度。clear: both 让元素放到之前浮动元素的下方；clearfix 在父元素末尾生成一个块级伪元素并清除浮动，从而把父元素撑开。
BFC（块级格式化上下文）是一块独立布局区域，计算高度时包含内部浮动，也不会与外部浮动重叠，内部外边距不会和外部折叠。overflow: hidden/auto、display: flow-root、Flex/Grid 子项等都会创建 BFC。flow-root 专为此设计，不会像 overflow: hidden 那样裁掉阴影或下拉菜单。
示例与推演
.clearfix::after { content: ''; display: block; clear: both; }
.media { display: flow-root; }
.media img { float: left; margin-right: 12px; shape-outside: circle(); }
.media 中图片浮动、文字环绕；父元素使用 flow-root 后高度包含图片，不需要额外标签。
易错点
用 overflow: hidden 清浮动会裁切溢出的弹层；浮动会把元素变为块级显示，宽度收缩为内容宽度。不要再用浮动做整页栅格。
参考回答可直接练习口述
浮动元素脱离常规流，父元素算高度时不包含它，所以会塌陷。可以给后面的元素 clear，或用 clearfix 伪元素，更推荐让父元素形成 BFC，最好用 display: flow-root，因为 BFC 计算高度会包含浮动，而且不像 overflow: hidden 那样会裁切内容。现在页面布局我用 Flex 和 Grid，浮动只保留给图文环绕。