clear: both 不会使 margin-top 失效，而是触发外边距合并导致视觉上消失；空清除元素因无高度、无bfc而成为合并中转站；推荐用 display: flow-root 替代。
clear: both 本身不会让 margin-top “失效”，而是它所处的上下文触发了外边距合并（margin collapse），导致视觉上看起来没起作用——这是标准行为，不是 bug。
clear: both 元素自身没有高度时会吃掉上方 margin
- 当你写一个空的清除元素：
<div style="clear: both"></div>，它高度为 0，但仍是块级盒，参与文档流 - 它前面的兄弟元素（比如
<h2></h2>）设置了margin-top: 20px，这个外边距会和清除元素的“上边界”发生合并 - 而清除元素又没内容、没 padding、没 border、没 BFC，于是它的上外边距“透过去”，和再上一个兄弟元素的下外边距也合并 —— 最终顶部空白消失
常见现象：
<h2 style="margin-top: 20px">标题</h2>-
<div class="clearfix"></div>（里面只含::after { clear: both }） - 结果：标题顶到视口顶部，
margin-top像被吞了一样
解决办法：
- 给清除元素加
padding-top: 1px或border-top: 1px solid transparent - 改用
display: flow-root（推荐）：它创建 BFC，天然阻断 margin collapse，且不依赖 hack - 避免用空
div清除，直接给父容器设display: flow-root
clear: both 加在非浮动元素上会干扰 margin 计算逻辑
- W3C 明确规定：
clear应用于非浮动块级元素时，浏览器会在其上外边距之上“插入清除空间”，但这个空间是独立于 margin 的 - 实际效果是：元素的 border edge 被下移，而它的
margin-top仍存在，只是位置被重排了 - 所以你看到的是“margin-top 没推远内容”，其实是清除空间和 margin 叠加后，视觉锚点变了
典型误用：
<div style="float: left"></div><div style="clear: both; margin-top: 20px">内容</div>
问题在哪：
- 第二个
div不浮动，clear: both把它往下压到浮动元素下方 - 它的
margin-top此时是相对于它新的定位起点（即浮动元素底部），而不是父容器顶部 - 如果浮动元素高度不稳定，这个 margin 就显得“飘忽”
建议做法：
- 把
margin-top移到父容器上（padding-top更稳） - 或者让第二个元素也浮动（保持流内一致性）
- 或改用 Flex/Grid 布局，根本绕开
clear
真正该用 display: flow-root 替代 clear: both 的场景
-
flow-root是 CSS Display Level 3 标准，2026 年所有主流浏览器已稳定支持（Chrome 82+、Firefox 69+、Safari 15.4+、Edge 88+） - 它创建无副作用的 BFC：包裹浮动、阻断 margin collapse、不改变盒模型尺寸
- 对比
overflow: hidden或zoom: 1，它语义清晰、无裁剪风险、无障碍友好
示例：
.container {
display: flow-root; /* 替代 clearfix */
}
.container > .float-item {
float: left;
}
/* 子元素 margin-top 不再“透出”，也不与父容器合并 */
注意：别在 flow-root 容器里再塞 clear: both —— 多余且可能引发嵌套 BFC 冲突。
外边距是否“生效”，关键不在 clear 本身，而在它是否暴露或加剧了 margin collapse。最易被忽略的是：空清除元素不是“透明胶带”，而是有边界的参与方；一旦它没物理边界（padding/border）又没 BFC，就会成为 margin 合并的“中转站”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
