当页面中存在右浮动的侧边栏（如目录）时，普通段落文字会自动绕行避让，但其容器边框却常与浮动元素重叠；通过 display: flow-root 可创建独立块格式化上下文，使边框收缩至浮动区域外，再配合 margin 控制间距即可完美解决。
当页面中存在右浮动的侧边栏（如目录）时，普通段落文字会自动绕行避让，但其容器边框却常与浮动元素重叠；通过 `display: flow-root` 可创建独立块格式化上下文，使边框收缩至浮动区域外，再配合 `margin` 控制间距即可完美解决。
在 CSS 布局中，浮动元素（float）会脱离常规文档流，导致后续的非浮动块级元素内容（如文本）自动环绕避让，但其容器的盒模型边界（如 border、padding）并不会自动收缩——这正是问题的核心：.warn 元素的红色边框与右侧蓝色浮动目录重叠，视觉上破坏了布局完整性。
解决的关键在于让 .warn 容器建立独立的块格式化上下文（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 等传统方式），它既不触发隐藏溢出，也不改变元素的浮动状态，同时确保该元素成为独立的格式化上下文根节点，使其 border-box 严格包裹其内部内容，并自动避开相邻浮动元素。
此外，为在浮动元素与正文之间留出合理间距，建议在浮动容器上添加外边距：
div#toc {
float: right;
width: 300px;
padding: 20px;
border: 1px solid blue;
margin-left: 10px; /* ✅ 在浮动块左侧留白，提升可读性 */
}
这样，第一个 .warn 将智能收缩至浮动区域左侧，与蓝色目录保持 10px 间隙；而第二个 .warn（位于浮动影响范围之外）则自然占据父容器全部可用宽度（100%），无需额外干预——行为完全符合预期。
⚠️ 注意事项：
-
flow-root兼容性良好（Chrome 58+、Firefox 53+、Safari 15.4+、Edge 79+），旧版浏览器可降级使用overflow: auto（需注意可能意外截断绝对定位子元素）； - 避免对
.warn同时设置width: 100%，否则会强制撑满父容器，抵消flow-root的收缩效果； - 此方案纯 CSS 实现，无需 JavaScript 或 DOM 操作，性能优异且易于维护。
综上，display: flow-root 是现代 CSS 中处理浮动避让与边框包裹问题的首选方案——精准、轻量、语义清晰。
