按道理讲，若要别让相邻元素间的Margin沉叠，可利用BFC或IFC解决。只是在实际操作中，若不清除浮动，需借助BFC或IFC处理Margin沉叠，往往需编写额外代码。Flow-root属性则可轻巧松解决Margin垂直方向沉叠问题。

display: flow-root， 这一CSS属性，是一款有力巨大而灵活的布局工具，助力开发者优化页面布局，解决浮动、Margin合并等问题，一边为自习惯布局给新鲜途径。本文将深厚入探讨CSS属性display: flow-root的声明及其应用。

若容器元素中的子元素用了float或绝对定位，容器元素的高大度将无法自习惯。此时flow-root属性可解决此问题。

在float浮动元素后添加clear属性也能解决高大度塌陷问题， 但clear属性不如flow-root方便灵活，尤其在利用:after伪元素清除浮动时其不优良的地方更为明显。

HTML+CSS布局指南：规范、模型与兼容优化。CSS布局模型：流动模型flow、 浮动模型float、层模型layer、层模型的绝对定位、相对定位、固定定位、相对定位与绝对定位组合；CSS弹性盒模型:flex属性、横轴排列、纵轴排列、flex占比；行内元素水平居中设置；定...

**清除浮动**：由于浮动元素会关系到周围元素布局，需用clear属性清除浮动，别让父元素高大度塌陷。常见清除方法有clear:both、clearfix类和CSS3的display: flow-root等。

Margin垂直方向沉叠指两个相邻元素的Margin垂直距离缩细小至较巨大值。Flow-root使包含盒子成为BFC，形成边界，别让外部Margin进入包含块内部。

比方说 包含浮动子元素的容器，在设置overflow: hidden或其他BFC规则后将生成新鲜的块级格式化上下文，阻止父元素巨大细小塌陷。

flow-root创建了一个无副作用的块格式化上下文， 在不用overflow:auto的情况下可避免内容塌陷。本文介绍了CSS中的flow-root属性， 作为display属性的一个值，用于解决因元素浮动弄得的父元素内容塌陷问题。flow-root创建了一个无副作用的块格式化上下文， 在不用overflow:auto的情况下可避免内容塌陷。本文给了实例代码展示其用法， 并提到该属性在...

Flow-root是一种较新鲜的属性，可轻巧松解决布局中常见问题。其用场景基本上包括解决float造成高大度塌陷问题，处理margin垂直沉叠问题，彻头彻尾包裹子元素等。尽管IE 11和Edge 11不支持flow-root， 但作为一种优化布局的CSS属性，Flow-root在以后的布局中将扮演关键角色。

.box { display: flow-root; }

二、Flow-root的特点

1. 创建BFC

2. 解决margin垂直方向沉叠问题

无需再清除float浮动了！CSS的display: flow-root属性。而眼下CSS有一个新鲜属性display: flow-root，可让你无需再特地清除浮动啰！.

3. 解决float浮动造成的高大度塌陷

学flow-root前，我们要先了解BFC的概念。BFC是一个名词， 是一个独立的布局周围，我们能搞懂为一个箱子，箱子里面物品的摆放是不受外界的关系到的。转换为BFC的搞懂是：BFC中的元素布局是不受外界的关系到， 并且在一个BFC中，一块和一行中全部的内联元素所组成的都会垂直地沿着其父元素的...

CSS深厚入搞懂流体特性和BFC特性下许多栏自习惯布局BFC除了能用来布局之外还有清除浮动，以及去除margin合并现象的作用，所以呢，display: flow-root也有类似的作用，相比float浮动、position绝对定位、overflow隐藏、inline-block等特性产生的块级格式化上下文，display: flow-root不会....display: flow-root还能和浮动属性配合，实现两栏自习惯的布局效果。

.box:after { content: ""; display: table; clear: both; } .box { display: flow-root; }

4. 处理margin垂直方向沉合问题

在腾讯云的产品中， 与Flow-root相关的产品和服务兴许是比比看常用的CSS布局工具、CSS预处理工具等，可参考腾讯云的文档和产品介绍页面获取更详细的信息。它能应用于随便哪个块级元素，并且通过设置flow-root来触发。

Flow-root是容器元素的新鲜属性。它为容器元素创建了一个新鲜的BFC，可隔离其子元素对外部元素的关系到。它最常用于解决margin垂直方向沉叠的问题，以及清除浮动造成的布局破碎等问题。在不需要用clearfix类似的解决方案的情况下能用Flow-root作为更轻巧松的解决方案。

Flow-root能解决margin垂直方向沉叠问题。

.box { display: flow-root; }.box-child { position: absolute; left: ; top: ; }

四、 Flow-root的浏览器兼容性

目前，Flow-root在巨大有些新潮浏览器中的兼容性良优良。IE 和 Edge 浏览器需要用-ms-flow-into替代display: flow-root，不支持flow-root。

在CSS中，我们三天两头会遇到父元素高大度无法被子元素撑起的情况。比如 我们想让父元素的背景色或边框覆盖在子元素上，但是父元素的高大度由其子元素的高大度决定，子元素内容变来变去时父元素的高大度无法自习惯。在这种情况下我们能用BFC来解决这玩意儿问题。而Flow-root是一种常用的创建BFC的方法。

Flow-root能将一个容器元素的内容和子元素隔离开来别让它们溢出父元素。

举个例子， 当我们需要在父元素上设置overflow: hidden以别让子元素浮动溢出时能用flow-root代替overflow: hidden。

Flow-root能为容器元素创建BFC，使得该元素成为一个独立的自包含块级格式化上下文。

.box { display: flow-root; /* overflow: hidden; */ }

1. 隔离外部元素

CSS属性flow-root是CSS Display Module Level3中的一个属性， 了解flow-root看得出来属性前需掌握BFC概念，掌握BFC前又需要先搞懂Box和Formatting Context的概念。视觉格式化模型会根据盒子的的边界来渲染盒子，通常盒子会创建一个包含其后代元素的包含迅速，但盒子并不由包含块所管束，当盒子的布局跑到包含块的外边时则称之为溢出(over...

2. 将子元素彻头彻尾包裹