浮动导致父容器高度塌陷和边距失效，根本原因是未形成BFC；解决方法有三：用clear:both清除浮动、以padding替代margin临时绕过、或触发BFC（推荐display: flow-root）。
浮动元素导致父容器高度塌陷，边距失效怎么办
这是浮动布局中最典型的问题：子元素设了 float: left 或 float: right 后，父容器“看不见”它们，高度坍缩为 0，原本设置的 margin-bottom 或 margin-top 就像悬在空中，视觉上被覆盖或消失。
根本原因不是边距被“覆盖”，而是父容器没形成 BFC（块级格式化上下文），无法包裹浮动子元素，导致后续兄弟元素直接贴上去，看起来像边距失效。
解决思路只有两个方向：让父容器重新“感知”浮动子元素的高度，或切断浮动对后续流的影响。
用 clear:both 清除浮动是最直接的修复方式
在浮动元素后面加一个空元素并设置 clear: both，能强制中断浮动流，使父容器恢复对高度的计算（前提是该清空元素也在父容器内）。
立即学习“前端免费学习笔记（深入）”；
- HTML 中插入：
- 更推荐用伪元素避免污染结构：
.clearfix::after { content: ""; display: block; clear: both; }，然后给父容器加class="clearfix" - 注意：
clear只对“紧邻的后续块级元素”生效，如果浮动元素后面是内联内容（如文字），clear不起作用 -
clear: both本身不产生高度，但会迫使元素换行到浮动元素下方，从而撑开父容器
用 padding 替代 margin 是临时绕过问题的权宜之计
当无法修改 HTML 结构或不敢动浮动逻辑时，把本该写在父容器上的 margin-bottom 换成 padding-bottom，看起来效果类似——但这只是视觉欺骗，并未解决塌陷本质。
-
padding属于父容器自身盒模型，即使高度为 0，它仍会占据空间（除非父容器设置了overflow: hidden且无 BFC 触发） - 副作用明显：如果父容器有背景色、边框或阴影，
padding会让这些样式延伸到“空余区域”，而margin不会 - 不能用于控制父容器与外部兄弟元素的距离——因为塌陷后，父容器的
margin实际上和兄弟元素发生了外边距合并（margin collapse）
BFC 是一劳永逸的现代解法，但要注意触发条件
只要让父容器生成新的 BFC，它就能包含内部浮动元素，自然恢复高度，margin 也能正常作用。
- 常用触发方式：
overflow: hidden、overflow: auto、display: flow-root（推荐，语义清晰且无副作用） -
display: flow-root是专为此设计的值，兼容性已覆盖 Chrome 64+/Firefox 58+/Edge 79+，比overflow: hidden更安全（不会意外裁剪溢出内容） - 避免用
position: absolute或float触发 BFC——这会让父容器脱离文档流，引发新问题 - 如果父容器已有
overflow: visible且依赖内容溢出，强行改overflow可能破坏交互（比如轮播图、下拉菜单）
真正要小心的是嵌套浮动场景：子容器浮动、孙容器也浮动，只在最外层触发 BFC 不够，每一级需要包裹的浮动容器都得各自建立 BFC。很多人修了一层就以为完事，结果中间某层又塌了——这时候得逐层检查 display 或 overflow 设置。
