应触发父容器BFC来修复浮动导致的高度塌陷，推荐display: flow-root（现代无副作用）或overflow: hidden（兼容性好但会裁剪溢出），避免用clear: both误加位置或padding硬撑。
浮动元素后面的内容紧贴上去，高度塌陷了怎么办
这是浮动最经典的副作用：父容器没高度，后续元素直接“塌”进来了。根本原因不是间距没了，而是父容器压根不知道自己该有多高——float 让子元素脱离文档流，父容器就当它不存在。
最直接的解法是触发父容器的 BFC（块级格式化上下文），让它重新包含浮动子元素。不用 JavaScript，纯 CSS 就能搞定：
-
overflow: hidden或overflow: auto（兼容性好，但注意会隐藏溢出内容） -
display: flow-root（现代写法，语义清晰，无副作用，Chrome 58+/Firefox 57+ 支持） -
float: left或float: right给父容器自身（不推荐，会让父也脱离流）
别用 height 硬撑，也别靠 JS 测量——既脆弱又多余。
加 padding 或 border 真的能撑开父容器吗
能，但只是“碰巧有效”，不是原理层面的修复。给父容器加 padding-top 或 border-bottom，确实会让视觉上看起来有间距，但父容器内部高度依然为 0，浮动子元素仍处于文档流之外。
立即学习“前端免费学习笔记（深入）”；
这意味着：
- 后续兄弟元素的位置可能被其他 CSS（比如
margin-collapse）干扰 - 如果父容器有背景色或阴影，视觉上可能错位
- 响应式场景下，
padding值固定反而更难维护
所以这不是解决方案，只是临时遮掩——就像往漏水的桶里加水，水位高了不代表不漏。
clear: both 放在哪儿才真正起作用
它只对“紧跟在浮动元素之后”的那个块级元素生效，且必须是**同层兄弟元素**。常见错误是把它加在浮动子元素自己身上，或者加在父容器上，这两者都无效。
正确用法只有两种场景：
- 在浮动元素后面插入一个空
<div>，并设 <code>clear: both - 给浮动元素的下一个兄弟块级元素（比如
<p></p>或<section></section>）设置clear: both
示例：
<div class="wrap"> <img src="a.jpg" style="max-width:90%" alt="CSS解决浮动导致的垂直间距塌陷_添加内边距或边框" > <div style="clear: both"></div> </div>注意：这个空
<div> 必须和 <code><img alt="CSS解决浮动导致的垂直间距塌陷_添加内边距或边框" > 同级，且在它之后。
现代项目该选 display: flow-root 还是 overflow: hidden
display: flow-root 是专为此类问题设计的，它创建 BFC 的同时不附带任何副作用。而 overflow: hidden 虽然兼容老浏览器，但一旦子元素真有溢出（比如下拉菜单、tooltip、横向滚动区），就会被意外裁剪。
如果你不需要支持 IE 或旧版 Android Browser：
- 首选
display: flow-root，干净、可读、意图明确 - 若需兼容 IE11，可用
@supports回退：@supports (display: flow-root) { .wrap { display: flow-root; } } @supports not (display: flow-root) { .wrap { overflow: hidden; } }
别为了省几行代码，在所有浮动父容器上无脑写 overflow: hidden——有些塌陷你还没看见，只是被裁掉了。
