CSS 排除简介：复杂 Web 布局的未来

css 布局从未像现在这样强大。float hacks、margin magic 以及它们所有脆弱的***的时代已经过去，因为咱们的布局梦想终于即将实现。需要居中一个元素？容易小便。想要一个粘性页脚？没有汗水。如何实现杂志式布局？到达那里。 

“CSS 排除”是咱们布局库的补充，它将成为另一个游戏规则改变者，协助咱们处理任何咱们渴望的复杂布局场景。在本文中，我将向您介绍 CSS 排除，并解释如何提高您对浏览器采用的声音，以帮助未来取得进展。

等等——还没准备好！

就像标题所说的那样，截至撰写本文时的规范还没有被完全采用。IE10+ 和 Edge 12+ 是当前的开拓者。这清楚地表明了微软是如何通过参与并愿意进行试验来推动网络发展的（如果你还记得的话，咱们要感谢他们开发 CSS Grid）。

肯定有文章温和地暗示这是浪费时间，甚至是白日梦，但我现在（以及未来）在这里要说的是，咱们作为开发人员帮助导航，并引导浏览器走上主动和创新。咱们的浏览器比以往任何时候都好，他们所在的社区也同样支持。 

现在是超越浏览器战争的时候了，它首先让您的声音通过邮件列表、文章、问题跟踪器和任何其他可以表达您意见的渠道被听到。我希望我关于这个主题的文章有助于进一步传播这个词，并提高咱们作为 Web 开发人员社区希望看到这个功能实现的意识。

什么是 CSS 排除？

好吧，准备一些词汇。“排除”通过咱们定义一个“排除区域”开始它的生命，该区域有助于包含块的“包装上下文”。因此，排除会影响包含块后代的布局。它定义了内联内容可以流动的周围区域，并且可以在任何 CSS 块级元素上定义。排除可以被认为比CSS 形状更强大，因为它们不限于浮动。 

还跟得上吗？让咱们试着更好地理解 W3C 的人们所说的“包装上下文”和“排除区域”是什么意思。

禁区

排除区域是一个块级元素，它不是浮点数，会生成一个“排除框”。排除元素建立新的块格式化上下文，并定义内联内容如何围绕元素流动。它还将浮动内容的包装能力扩展到任何块级元素。

当一个元素成为一个排除项时，内联内容将环绕排除区域，但在它们自己的格式化上下文中。如果元素是一个排除，它不会环绕它自己的排除区域。

多个排除的顺序由 z-index 属性控制。可以使用咱们目前可用的任何选项（relative、absolute、static等fixed）来定位排除项。还要记住，如果你浮动一个元素，它不能成为一个排除项。

包装上下文

到目前为止，咱们已经多次提到“包装上下文”，网上有很多复杂的定义，但它到底是什么？将其视为包含内联流内容和排除区域的父容器。

包裹流

排除以属性开头 wrap-flow ，当使用除 之外的任何其他值定义时auto，该属性将被激活。可以为其赋予一些值，例如both, start, end, minimum, maximum, 并且clear它们在上下文方面的行为都不同。

See the Pen  CSS Exclusions: wrap-flow by Envato Tuts+ (@tutsplus)  on CodePen.

如果您的浏览器不支持 CSS 排除，下面是它在支持 CSS 的浏览器中的屏幕截图：

正如您将在上面的演示中看到的那样， wrap-flow有助于确定内联内容流动的区域。此内容可以以几种不同的方式流动。让咱们更具体地了解每一个，为了清楚起见，用一些截图：

• None: 没有创建排除。

• auto: 不创建排除。内联流内容与往常一样与元素交互。

• both: 内联流内容可以在排除的四面八方流动。

• start：内联流内容只能围绕排除区域的起始边缘流动，但结束边缘是无流动区域。

• end：内联流内容只能在排除区域的结束边缘周围流动，但开始边缘是无流动区域。

• minimum：内联流内容只能围绕可用空间较少的边流动，而另一边留空。

• maximum：内联流内容只能绕着有更多可用空间的边流动，而另一边留空。

• clear：沿内联方向的排除的开始和结束边缘没有流动。

环绕式

此属性控制打算在排除区域周围流动的内容的行为方式，并且可以通过我将很快分享的几种不同方式进行控制（如果您的浏览器不支持排除，请使用屏幕截图）。

See the Pen  CSS Exclusions: wrap-through by Envato Tuts+ (@tutsplus)  on CodePen.

该 wrap-through属性可以很好地用于标注文本或拉引号等情况，就像您在打印布局设计中看到的那样。

• wrap：元素继承其父节点的 包装上下文。它的后代内联内容包含在  元素外部定义的排除项。

• none: 元素不继承其父节点的 包装上下文。它的后代仅受  元素内部定义的排除区域的约束。

范围和层次

排除会影响从排除的包含块下降的内联流内容。默认情况下，排除项也遵循咱们习惯的典型绘制顺序。排除项与定义它们的文档顺序相反。

See the Pen  CSS Exclusions: Multiple Exlusions & Layering by Envato Tuts+ (@tutsplus)  on CodePen.

如果您的浏览器不支持上面的演示，这是一个屏幕截图：

最后一个排除出现在所有其他排除之上，因此它会影响所有其他先前排除的内联流内容或同一包含块的后代元素。该 z-index 属性可用于更改 定位 排除框的顺序。静态定位的排除不受 z-index 属性的影响，因此遵循典型的绘制顺序。

功能查询支持

为了与其他不支持 CSS Exclusions 的浏览器配合得很好，您可以使用 CSS 功能查询，也称为@supports. 如果您没有使用支持的浏览器，您会看到到目前为止咱们已经在演示中使用了这些浏览器。

@supports (-ms-wrap-flow: both) {

  .element {…}

}

通过包含该属性 -ms-wrap-flow ，您将能够仅将范围限定为专门支持的浏览器（IE10+ 和 Edge 12+）。

离别的思念

此时 CSS Exclusions 将无法使用，clip-path因为 Edge 不支持此属性。话虽如此，如果它得到广泛支持，CSS 排除将通过采用抽象和倾斜形状而不是严格的矩形框来变得更加强大。这是一个不幸的场景，因为咱们无法测试早期的实现来真正见证使用非矩形对象进行文本换行的威力。

See the Pen  CSS Shape w/Margin by Envato Tuts+ (@tutsplus)  on CodePen.

定位要求也可能导致排除父级之外的任何元素位于下方或上方的问题，具体取决于您z-index ，并且可能会出现问题，因为这是 CSS 排除的要求。排除区域也变得不知道浏览器视口，因此它们在收缩或扩展浏览器时不会做出响应。这意味着任何定位的对象都有可能根据其定位上下文从屏幕上掉下来。

我希望这篇文章能鼓励你接受这个属性，不管当前的衰落如何！我还希望它向浏览器供应商发送一条消息，让他们了解当前的限制，以及咱们希望让任何制作浏览器的人全面实现这一点的愿望。祝大家编码愉快！