当页面中存在右浮动的侧边栏时，普通段落文字会自动绕行避让，但其外层容器的边框却常与浮动元素重叠；通过 display: flow-root 创建块级格式化上下文，可使容器边界自动收缩避让浮动元素，同时保持非浮动区域的正常宽度。
当页面中存在右浮动的侧边栏时，普通段落文字会自动绕行避让，但其外层容器的边框却常与浮动元素重叠；通过 `display: flow-root` 创建块级格式化上下文，可使容器边界自动收缩避让浮动元素，同时保持非浮动区域的正常宽度。
在 CSS 布局中，浮动（float）元素会脱离常规文档流，导致后续的块级元素内容（如文本）自动环绕避让，但这些块级元素自身的盒模型（尤其是 border 和 background）默认仍按完整行宽渲染，从而与浮动元素发生视觉重叠——这正是常见于警告框（.warn）、引用块或卡片容器的典型布局问题。
解决该问题的核心在于：让受影响的容器建立独立的块级格式化上下文（Block Formatting Context, BFC）。BFC 能确保其内部内容严格按自身边界排列，并自动为浮动元素留出空间（即“收缩”宽度以避开浮动区）。现代最简洁、语义最明确的方式是使用：
div.warn {
display: flow-root; /* 创建 BFC，自动避让浮动 */
padding: 20px;
border: 1px solid red;
}
display: flow-root 是专为此类场景设计的值：它既保持元素作为块级容器的行为（不改变文档流位置），又强制触发 BFC，使边界精确包裹内容且不侵入浮动区域。相比旧方案（如 overflow: hidden、float: left 或 position: absolute），它无副作用、无障碍友好、且易于维护。
此外，为在浮动元素与正文之间添加清晰间距，推荐在浮动元素上使用 margin（而非在正文容器上加 margin-right），例如：
div#toc {
float: right;
width: 300px;
padding: 20px;
border: 1px solid blue;
margin-left: 16px; /* 在浮动侧边栏左侧留白，避免紧贴正文 */
}
这样，第一个 .warn 容器将自动收缩至浮动区左侧边界前，与侧边栏保持指定间隙；而第二个 .warn（位于浮动元素影响范围之外）则自然占据剩余全部宽度（即 100% 父容器宽度），无需额外干预。
✅ 注意事项：
-
flow-root兼容所有现代浏览器（Chrome 65+、Firefox 58+、Safari 15.4+、Edge 79+），若需支持 IE，可降级使用overflow: hidden（但需注意其可能意外裁剪阴影或下拉菜单）； - 避免对
.warn同时设置width: 100%—— 在 BFC 下该声明冗余，且可能在某些弹性布局中引发冲突； - 浮动本身已属传统布局模式，新项目建议优先采用 Flexbox 或 Grid，但
flow-root对遗留浮动布局的修复依然高效可靠。
综上，display: flow-root 是解决“浮动干扰边框渲染”问题的标准化、低侵入性方案，兼顾语义清晰性与布局鲁棒性。
