clear属性不能直接解决父容器塌陷，而是通过让后续块级元素避开浮动边界下移，间接使父容器获得可测量高度；现代推荐用BFC（如overflow:hidden、display:flow-root）或Flex/Grid布局来根本解决。
clear属性为什么能解决浮动导致的父容器塌陷
当子元素使用 float 后，它会脱离文档流，父容器无法感知其高度，从而出现“塌陷”——背景、边框消失，后续元素上移。而 clear 本身并不清除浮动，而是强制元素**避开前面浮动元素的边界**，常被用在浮动元素之后的兄弟元素上，使其“下移”到浮动区域下方，间接让父容器重新获得可测量的内容高度。
clear常用的取值和对应行为
clear 只对块级元素生效，常见值有：
-
clear: left：元素的左边不能紧贴任何左浮动元素 -
clear: right：元素的右边不能紧贴任何右浮动元素 -
clear: both：左右两边都避开浮动元素（最常用） -
clear: none：默认值，不避开任何浮动
直接加clear的实际写法与典型陷阱
常见做法是在浮动元素后插入一个空 <div> 并设置 <code>clear: both：
<div class="container"> <div class="float-left">左浮</div> <div class="float-right">右浮</div> <div style="clear: both;"></div> </div>
但这个方案的问题是：污染 HTML 结构，且空标签无语义；更隐蔽的坑是：如果父容器本身设置了 height 或 min-height，clear 元素可能被截断，导致视觉上仍像没清掉。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
现代更稳妥的替代方案（不依赖clear）
真正解决父容器塌陷，推荐用触发 BFC 的方式，比 clear 更干净：
- 给父容器设置
overflow: hidden（或auto），但注意可能意外裁剪阴影或定位元素 - 用
display: flow-root（Chrome 64+/Firefox 62+ 支持，语义清晰、无副作用） - Flex 或 Grid 容器天然不塌陷，把父容器设为
display: flex即可
如果必须兼容 IE8–9，才退回到 clear + 空标签或伪元素方案（如 ::after { content: ""; display: table; clear: both; }）。别忘了，clear 是“绕开”，不是“修复”浮动本身——真正要控制布局，优先考虑是否还能不用浮动。
