clear属性仅作用于自身，不能防止父容器高度塌陷；它只控制当前元素避开浮动元素，不触发BFC、不改变文档流归属，真正解决塌陷需用clearfix（伪元素+display:table+content:""）或display:flow-root。
直接用 clear 属性本身不能防止父容器高度塌陷——它只控制“当前元素”不与前面的浮动元素并排，对父容器是否感知子项高度毫无影响。
为什么 clear 单独写在浮动元素上没用
clear: both 作用对象是**自身**，不是父容器。给一个 float: left 的子元素加 clear: both，只会让它往下挪到前一个浮动元素下方，但父容器依然“看不见”它，高度照样塌陷。
- 常见误写：
.child { float: left; clear: both; }→ 父容器高度还是 0 -
clear不触发 BFC，也不改变文档流归属，纯属定位偏移指令 - 只有当
clear应用在**非浮动的、位于浮动元素之后的兄弟元素**上时，才会影响布局位置，但依然不撑高父容器
把 clear 放在空标签里为什么有时“看起来有效”
在浮动元素后插入一个空 <div> 并设 clear: both，确实能让父容器有高度，但这只是副作用：该空元素作为普通块级元素，会占据空间并把父容器底部“拉下来”，并非真正修复塌陷逻辑。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- HTML 必须写成：
<div class="parent"><div style="float:left"></div><div style="clear:both"></div></div> - 这个空
<div>必须是父容器的**最后一个子元素**，且不能被display: none或visibility: hidden隐藏 - 缺点明显：污染 HTML 结构、破坏语义、响应式中可能意外撑开多余空白
- 如果父容器设置了
height或max-height，这个空<div>还可能被截断或溢出
clear 和 clearfix 的关键区别在哪
clear 是单个元素的定位控制；clearfix 是通过伪元素在父容器内部生成一个“清除点”，同时触发 BFC（块级格式化上下文），让父容器重新包含浮动子项——这才是真正解决塌陷的机制。
立即学习“前端免费学习笔记（深入）”；
- 标准
clearfix中的clear: both是写在::after伪元素上的，且必须配合content: ""+display: table（或block）才能渲染并参与布局计算 - 漏掉
content: ""：伪元素不生成，clear形同虚设 - 只写
clear: both但没设display：伪元素是 inline，无法清除浮动 - 现代替代更简单：
display: flow-root一行顶全部，但 Safari 10.1+ 才支持，老项目仍需clearfix
真正容易被忽略的是：clear 永远不负责“告诉父容器：我下面有内容”，它只管“我自己别挨着浮动元素”。要撑高父容器，必须让父容器自己建立包含关系——靠 BFC，不是靠 clear。
