bootstrap布局中父容器因浮动子元素高度塌陷时，首选.clearfix类（ie6+兼容），次选display:flow-root（现代标准、无裁剪），避免overflow:hidden（裁剪溢出内容），禁用空标签法（破坏语义），慎用父容器浮动（引发连锁偏移）。
当使用 Bootstrap 构建布局时，若子元素设置了浮动（float），父容器常因未形成 BFC 而高度塌陷，导致后续内容错位或样式异常。以下是针对该问题的多种处理方式及其特性说明：
一、使用 .clearfix 辅助类
Bootstrap 官方提供的 .clearfix 类通过 :after 伪元素插入并设置 clear: both，强制父容器包含浮动子元素，兼容性覆盖 IE6+，是传统且稳妥的方案。
1、在浮动元素的直接父容器上添加 class="clearfix"。
2、确保该容器未同时设置 overflow: hidden 或 transform 等可能干扰伪元素渲染的属性。
3、如需支持 IE6/IE7，Bootstrap 3 及更早版本会自动注入 *zoom: 1 触发 hasLayout。
二、采用 display: flow-root
这是现代标准解法，通过将父容器设为 flow-root 值，主动创建 BFC，自然包裹所有浮动子元素，无需伪元素干预，也避免溢出裁剪风险。
1、在父容器上添加 class="d-flow-root"（Bootstrap 5 中需自定义或使用 utility 类扩展）。
2、或直接在 CSS 中写入 display: flow-root;（Chrome 64+/Firefox 63+/Safari 15.4+/Edge 79+ 支持）。
3、验证父容器内绝对定位元素、下拉菜单、box-shadow 等溢出内容是否完整可见，无裁剪现象即表示生效。
三、利用 overflow: hidden（不推荐）
该方式通过触发 BFC 实现清除浮动，但副作用明显：任何超出容器边界的视觉内容（如下拉菜单、阴影、悬停提示）均会被强制裁剪，调试困难且不可逆。
1、给浮动元素的父容器添加 style="overflow: hidden;"。
2、检查页面中是否存在 position: absolute 子元素越界、drop-shadow 消失或 popover 不显示等问题。
3、一旦发现异常，必须立即移除该声明并改用其他方案。
四、插入带 clear 的空标签（已淘汰）
在浮动元素末尾手动添加
，原理简单但破坏语义结构，增加无意义 DOM 节点，不符合现代前端工程规范。1、在浮动子元素闭合后、父容器结束前插入
。2、在全局 CSS 中定义 .clear { clear: both; height: 0; line-height: 0; font-size: 0; }。
3、确认 HTML 结构中不再出现冗余 div，此方法已被主流项目弃用。
五、对父容器自身应用浮动（规避式方案）
将父容器也设为 float: left 或 float: right，使其脱离文档流并与浮动子元素同层，从而“视觉上”恢复高度，但会引发连锁布局偏移，维护成本极高。
1、为父容器添加 class="float-left" 或内联 style="float: left;"。
2、检查其兄弟元素是否发生位置漂移或换行异常。
3、若页面存在多列并排或响应式断点，该方式极易导致整体布局失控。
