17370845950

浮动元素脱离文档流导致父容器高度塌陷，需用clearfix或BFC解决；等宽布局中margin易超100%，应配合box-sizing:border-box；现代开发优先使用flex或grid。

浮动元素脱离文档流导致父容器高度塌陷

当子元素使用 float: left 或 float: right 时，它会脱离正常文档流，父容器无法感知其高度，表现为高度为 0 —— 这是多列布局中最常见的“消失”问题。

典型现象：父容器背景色/边框不显示，后续元素上移覆盖浮动内容，打印或截图时布局错乱。

• 仅靠 width 和 float 无法让父容器自动包裹子列
• display: inline-block 虽可避免塌陷，但会产生额外空白间隙，且对垂直对齐敏感
• 现代方案（如 display: flex）更可靠，但若需兼容 IE8–IE9，仍得处理浮动

clear: both 是最直接的清除方式，但位置很关键

clear: both 的作用是「禁止当前元素的上边界紧贴左侧或右侧浮动元素」，它本身不修复父容器塌陷，而是靠在末尾插入一个「撑开高度」的块级元素来间接解决。

常见错误写法： A B ，但没在内部加清除元素。

立即学习“前端免费学习笔记（深入）”；

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

• 必须作用于浮动元素的**直接父容器**，否则无效
• 用 ::after 伪元素比额外加 更干净，避免 DOM 污染
• IE6–7 不支持 ::after，需用 *zoom: 1 触发 hasLayout（如 .clearfix { *zoom: 1; }）

float 多列等宽布局中 margin 和 box-sizing 的坑

用 float 实现两栏或三栏等宽布局时，margin 容易让总宽度超 100%，导致最后一列换行。

例如：三个 width: 33.33% 的浮动列，再加 margin-right: 10px，第三列必然掉行。

• 解决方案一：最后一列 margin-right: 0（需额外类名或 :last-child）
• 解决方案二：改用 box-sizing: border-box，把 padding/border 算进 width 内，留出 margin 余量
• 不要用 % + px 混合单位做列宽，尤其在缩放或高 DPI 屏幕下误差放大

清除浮动不是万能的，复杂嵌套时容易失效

当浮动元素内部还有浮动子元素、或父容器本身也被浮动时，::after 清除可能不生效——因为清除只作用于当前 formatting context，而浮动容器不创建新的 BFC。

此时真正起效的是触发 BFC（Block Formatting Context），比如：

.bfc-parent {
  overflow: hidden; /* 或 auto / scroll */
  /* 不要设 height，否则会裁剪溢出内容 */
}

• overflow: hidden 是最轻量的 BFC 触发方式，兼容性好（IE7+）
• 但注意：如果子元素有 position: absolute 且超出父容器，也会被裁剪
• 多层浮动嵌套时，每一级浮动父容器都应独立处理清除或 BFC，不能只靠顶层 clearfix

浮动布局的脆弱性在于它本质是“借位排版”，一旦某处尺寸计算偏差、字体渲染差异或 zoom 变化，整行就可能断裂。现在用 display: flex 或 display: grid 替代，才是更可控的选择。