如何使用CSS清除浮动确保嵌套容器的边框正确显示？-css教程-PHP中文网

根本原因是浮动元素脱离文档流导致父容器高度塌陷，border绘制在0高度上；推荐用display:flow-root创建bfc，或::after伪元素清除浮动（兼容ie6+），避免overflow:hidden裁剪阴影等副作用。

如何使用css清除浮动确保嵌套容器的边框正确显示？

父容器边框不包裹内容，根本原因是高度塌陷

浮动元素脱离文档流，父容器计算高度时直接忽略它们，border 画在“0 高度”上——不是边框没生效，是它根本包不住内容。临时加 height: 200px 能立刻验证这点：边框突然显示了，说明问题不在 CSS 书写错误，而在布局机制本身。

display: flow-root 是现代首选，但 IE 完全不支持

给父容器加 display: flow-root 是最干净的解法，它创建新的 BFC，强制包含所有浮动子项，且不影响其他样式。但注意：display: flow-root 在 IE 所有版本中被完全忽略，包括 IE11。如果你的项目仍需兼容 IE，这条不能单独用。

Chrome 100+ 对 box-sizing 解析更严格，务必给浮动子项设 box-sizing: border-box
别混用 margin-left 和 margin-right 控制浮动间距，横向浮动时上下 margin 实际无效，容易引发 1px 错位

伪元素清除法（clearfix）仍是跨浏览器最稳方案

用 ::after 插入一个不可见块级元素并 clear: both，既不污染 HTML，又兼容到 IE6（需额外 zoom: 1）。标准写法是：

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

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

下载

.container::after {
  content: "";
  display: table;
  clear: both;
}

注意两点：

display: table 比 block 更可靠，避免某些旧版 Safari 下清除失效
IE6–7 必须加 zoom: 1 在父容器上触发 hasLayout，否则伪元素不生效
别把 clear: both 加在浮动子项末尾——它只让那个子项自己下移，对父容器高度毫无帮助

overflow: hidden 看似简单，实际埋雷最多

很多人图省事写 overflow: hidden，但它会裁掉超出区域的内容，比如 box-shadow、transform 位移后的部分、或 position: absolute 子元素溢出父容器的部分。尤其当子元素用了 scale(1.05) 或 translateZ(1px)，边框看起来“少了一截”，其实是被裁掉了。

overflow: auto 更危险：内容稍宽就会出现滚动条，破坏视觉预期
如果必须用，至少加 padding 预留空间，而不是依赖 overflow “撑高”

真正容易被忽略的是：清除浮动不是“修 bug”，而是明确告诉浏览器“这个容器要自适应内部浮动内容的高度”。display: flow-root 和 ::after + clear 都是在做这件事；而 overflow 只是副作用附带实现，代价不可控。