当页面中存在右浮动的目录栏时，普通块级元素的文本内容会自动绕行，但其边框仍会与浮动元素重叠；通过 display: flow-root 可创建独立的块格式化上下文，使边框自动收缩避让浮动元素，同时保留 100% 宽度行为。
当页面中存在右浮动的目录栏时，普通块级元素的文本内容会自动绕行，但其边框仍会与浮动元素重叠；通过 `display: flow-root` 可创建独立的块格式化上下文，使边框自动收缩避让浮动元素，同时保留 100% 宽度行为。
在 CSS 布局中，浮动（float）元素会脱离常规文档流，导致后续相邻的块级元素（如 <div class="warn">）的文字内容自动为其留出空间（即“文字环绕”），但该元素自身的盒模型（包括 <code>padding、border 和 background）默认不会收缩——它仍按 100% 父容器宽度渲染，从而造成视觉上的边框重叠。
解决这一问题的核心在于：让目标元素建立一个独立的块格式化上下文（Block Formatting Context, BFC）。BFC 的关键特性之一就是：其内部的块级盒子会自动调整尺寸，避开同级浮动元素。
最简洁、语义清晰且现代的标准方案是使用：
div.warn {
padding: 20px;
border: 1px solid red;
display: flow-root; /* ✅ 创建 BFC，自动 shrink-wrap 避开浮动 */
}
display: flow-root 是专为创建无副作用 BFC 而设计的值（相比 overflow: hidden 或 float: left 等传统方式），它既不触发不必要的滚动条，也不改变元素的浮动状态或影响子元素布局，是当前推荐的最佳实践。
此外，为提升视觉层次与可读性，建议在浮动元素上添加外边距以明确分隔：
div#toc {
float: right;
width: 300px;
padding: 20px;
border: 1px solid blue;
margin-left: 10px; /* 在浮动元素与正文间留出清晰间隙 */
}
✅ 效果说明：
- 第一个
.warn元素（位于浮动元素下方且相邻）将自动收缩宽度，右侧边界止于浮动元素左侧边缘，并保留指定margin-left间隙； - 第二个
.warn元素（下方无浮动干扰）则自然占据剩余全部可用宽度（即 100% 父容器宽度减去浮动区域），无需额外样式干预； - 所有
.warn元素保持统一的padding和border样式，视觉一致且语义明确。
⚠️ 注意事项：
-
flow-root兼容性良好（Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+），旧版浏览器可降级使用overflow: hidden（需注意可能截断绝对定位子元素）； - 切勿对
.warn使用width: 100%或float，这会破坏 BFC 行为或引发新的布局冲突； - 浮动本身已是过时布局模式，生产环境建议优先采用 Flexbox 或 Grid 替代，但理解 BFC 对调试遗留代码和深入掌握 CSS 渲染机制仍至关重要。
