clear属性不解决父容器塌陷，仅控制块级元素自身位置避开浮动；真正方案是触发BFC（如display: flow-root）、伪元素清除或改用Flex/Grid布局。
直接说结论： clear 属性本身不“清除浮动”，它只是让当前元素避开前面浮动元素的影响；真正要解决父容器高度塌陷，得用触发 BFC、伪元素清除或 overflow 等方案，clear 只在特定布局位置起作用。
为什么 clear 不能解决父容器塌陷？
很多人误以为给父容器加 clear: both 就能“清浮动”，但这是无效的——clear 只对**块级定位元素自身的位置**生效，它要求该元素的上边界避开前面浮动元素的外边缘。而父容器若没有内容、没有高度、且未形成 BFC，它根本不会“感知”子浮动的存在，加 clear 也无处可避。
常见错误现象：
.container {
border: 1px solid #333;
}
.container::after {
content: "";
display: block;
clear: both; /* ✅ 正确：伪元素在末尾，能避开前面所有浮动 */
}
/* ❌ 错误示例：下面这行没用 */
.container {
clear: both; /* 不生效，因为 container 自身没参与文档流定位（它没高度） */
}
clear 的实际使用场景和取值含义
它只在元素为 display: block 或 table 等参与普通流的块级元素时有效，且必须紧跟在浮动元素之后出现。
-
clear: left：元素上边框避开前面所有float: left元素的右边缘 -
clear: right：避开前面所有float: right元素的左边缘 -
clear: both：同时避开左右浮动元素（最常用） -
clear: none：默认值，不避开任何浮动
典型用法是控制文字环绕后的换行位置，比如图文混排中让标题强制换到图片下方：
.img-wrap {
float: left;
margin-right: 12px;
}
.title {
clear: both; /* 确保标题一定从新行开始，不和图片并排 */
}
真正可靠的清除浮动方案（不是靠 clear）
目标是让父容器“包裹住”浮动子元素，关键在于让它形成一个独立的格式化上下文（BFC）或插入占位节点。
立即学习“前端免费学习笔记（深入）”；
- 伪元素清除法（推荐）：
.clearfix::after { content: ""; display: table; clear: both; }注意：display: table或block都可，但必须有content和clear，且伪元素需在 DOM 流中处于浮动元素之后 - 触发 BFC：
overflow: hidden、overflow: auto、display: flow-root（现代首选）
——display: flow-root最干净，不影响溢出行为，兼容性到 Chrome 64+/Firefox 58+ - 避免浮动：用
flex或grid替代浮动布局，从根本上绕过问题
最容易被忽略的一点：清除浮动不是目的，而是为了修复布局失控；一旦用了 float，就得同步考虑父容器的包含性——这个意识比记住 clear: both 更重要。
