排除区域有望像功能更强大的、对网格友好的浮动一样

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

排除区域(在我撰写本文时,目前处于“工作草案”规范阶段)有点像 float,因为它允许内联内容环绕元素。但它并非完全是浮动。陈慧静有一篇 极好的解释

排除元素是一个块级元素,它不是浮动,并生成一个排除框。排除元素建立一个新的块级格式化上下文

当元素的 wrap-flow 属性计算结果为其初始值 auto 以外的值时,该元素将成为排除元素。当元素成为排除元素时,内联内容将环绕排除区域,但在其自己的格式化上下文中。

来源:陈的文章

支持仅限于 Edge 和 IE(同样,在我撰写本文时)

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
10*12*

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari

陈很好地说明了它们为何有用,但最近也出现了一轮新的讨论。Rob Weychert 记录了一个简单的布局情况,其中一个图像浮动到左侧,文本环绕它。

来源:Rob的文章

如这些浅红色的条形所示,Rob 设置了一些 display: grid; 列以将文章中的元素对齐到这些轴上。这确实是一个经典的“编辑布局”。但实际上没有很好的机制可以将该图像放置到网格上并保持环绕效果。通过将内容和图像都放置到单独的网格项中,您将无法获得环绕效果。您可以使用浮动,但这并没有使用网格。

Rachel Andrew 插话道,答案是CSS 排除区域。虽然 Rob 的示例 最终不得不使用浮动,但 Rachel 重新使用排除区域进行了修改。排除区域使代码变得更加简单。

/* with floats, replicating exactly what the grid is doing */
img {
  float: left;
  width: calc( 3 * ((100% - 50px - 15em) / 6) + 50px + 2em );
}

/* with exclusions, using the grid */
img {
  grid-row: 2;
  grid-column: 1 / 3;
  -ms-wrap-flow: both;
}

也许我们可以 对 Rachel 的呼吁表示赞同,以了解规范的状态以及其他作者的使用案例。