CSS解决浮动导致的垂直间距塌陷_添加内边距或边框-css教程-PHP中文网

应触发父容器BFC来修复浮动导致的高度塌陷，推荐display: flow-root（现代无副作用）或overflow: hidden（兼容性好但会裁剪溢出），避免用clear: both误加位置或padding硬撑。

css解决浮动导致的垂直间距塌陷_添加内边距或边框

浮动元素后面的内容紧贴上去，高度塌陷了怎么办

这是浮动最经典的副作用：父容器没高度，后续元素直接“塌”进来了。根本原因不是间距没了，而是父容器压根不知道自己该有多高——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` 放在哪儿才真正起作用

它只对“紧跟在浮动元素之后”的那个块级元素生效，且必须是**同层兄弟元素**。常见错误是把它加在浮动子元素自己身上，或者加在父容器上，这两者都无效。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

正确用法只有两种场景：

在浮动元素后面插入一个空 ，并设 clear: both
给浮动元素的下一个兄弟块级元素（比如或）设置 clear: both


示例：
<div class="wrap">
  @@##@@
  <div style="clear: both"></div>
</div>
  
注意：这个空 
 必须和  同级，且在它之后。现代项目该选 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——有些塌陷你还没看见，只是被裁掉了。