CSS排斥：让无聊的布局不那么无聊

在本教程中，我们将探讨CSS排斥 (Exclusions)。初一看，CSS排斥好像和CSS形状相似，因为它们都是将内容环绕于一个元素。但在技术上，它们的目的是不同的。

CSS形状模块定义了一个元素的真实形状，而内容不会环绕在那个形状上，除非此元素是浮动的。而CSS排斥模块却是专门用于这一目的；它支持嵌入内容环绕于一个元素，而无需浮动，也不管此元素是如何放置的，无论absolute, relative或fixed。

属性

CSS排斥模块引入了一些新的属性和值，它们是：

• wrap-flow：设置排斥区域，以及内容应该如何环绕。
• wrap-margin：顾名思义，设置边距或环绕排斥区域的偏移量。

浏览器支持

值得一提的是，目前CSS排斥只在Edge，Internet Explore 10及以上的版本中得到支持，再一次表现了微软公司对浏览器前沿技术的推动（我们也要感谢他们对于CSS网格(Grid)的开发）。到目前为止，我们必须在使用这个新属性之前加上前缀-ms-。

红色的海洋延伸至右边。。

为更好地理解CSS排斥是如何工作的，我们准备好了一个简单的开始页面，它包含几行文字和后面的一张人物图片。

没用CSS排斥的布局

这是网页上非常常见的一种模式，所以我们看一看是否能用CSS排斥将其装饰一番。假设你的浏览器支持排斥，我们要追求如下效果：

使用CSS排斥
首先，让我们将内容安排成两列，并将人物图片放到中间。你如何编排并不要紧，比如你可以用CSS Flexbox，CSS网格，或"传统的"使用float属性的方法。

看起来不错，分列的文字（对于本示例来说不是必须的）
我们从上述图片中可看出，人物图片已经从文件流中移除了，它被放在了内容的顶部，变得模糊了一些。使用CSS排斥，我们可强制文字内容环绕这张人物图片。

为实现这一点，我们要设置图片(avatar)的wrap-flow属性，将其值设置为both。

.avatar {
   -ms-wrap-flow: both; // Works in IE and Edge.
   wrap-flow: both; // Does't not work in any browser.
}

wrap-flow属性将.avatar设置为一个"排斥区域”；这是一个文字内容不能穿过的区域。你在下图中可以看到，文字内容被挤到了图片的左边和右边。

可能的值

其它可接受的值还有：start，end，maximum，minimum和clear。

第一个值，start，使得文字环绕在排斥区域的开始位置，但让区域的结束处后面变为空白。

.avatar {
   -ms-wrap-flow: start;
}

作用于我们的页面，应该会看到如下效果：

内容流动到图片的左边
end值，正如其名，它会起到相反的作用，让文字内容围绕到排斥区域的结束处。

.avatar {
   -ms-wrap-flow: end;
}

于是得到如下效果：

在右边围绕

注意：排斥区域的开始(start)和结束(end)是由内容的书写方向决定的。如果文字是从右至左书写的，比如阿拉伯文和希伯来文，则内容的环绕开始于排斥区域的右边，结束于排斥区域的左边。

对于日文，如果是由上至下书写，则内容的环绕开始于顶部，结束于底部。

对于不同书写方向的内容流。图片来自于W3C。
第三种可接受的值是maximum。

.avatar {
   -ms-wrap-flow: maximum;
}

它会让内容出现于排斥区域在容器区域内空白最大的地方。

minimum值则相反。

.avatar {
   -ms-wrap-flow: minimum;
}

这里，内容会流过排斥区域周围最窄的空间处。

最后一个值是clear。

.avatar {
   -ms-wrap-flow: clear;
}

这和你从浮动体那里学到的那个clear非常相似，因为它会清除排斥区域的左边和右边内容。因而，它只允许内容流动到排斥区域的顶部和底部。

排斥边距

和CSS形状类似，CSS排斥模块也有一个定义排斥区域边距的属性，称为wrap-margin。和margin属性不同，wrap-margin必须是一个正值。

.avatar {
   -ms-wrap-flow: end;
   -ms-wrap-margin: -10px; // Invalid.
   -ms-wrap-margin: 10px; // Valid.
}

此外，wrap-margin属性不允许为每一边 (上下左右) 分别设置。这个功能未来是否会出现仍未可知。

.avatar {
   -ms-wrap-flow: end;
   -ms-wrap-margin: 10px 20px 10px 30px; // Invalid.
   -ms-wrap-margin: 10px; // Valid.
}

一旦设置了这个属性，我们可以看到排斥区域周围的空白变多了。

@supports

如果我们将人物图片放到内容上，没有CSS排斥的支持，将得到一个很糟糕的布局。因而，考虑回退才是明智的，将相关的样式放到一个@supports规则下，比如：

.site-content .avatar {
  width: 180px;
  height: 180px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  margin-top: 80px;
}
 
/* wrap the relevant rules in a @supports declaration, just to be safe */
@supports (-ms-wrap-flow: both) {
  .site-content .avatar {
    position: absolute;
    top: 300px;
    left: 50%;
    margin-left: -90px;
    -ms-wrap-margin: 50px;
    -ms-wrap-flow: both
  }
}

这样，我们的CSS排斥样式将只在支持它的浏览器中起作用。

总结

CSS排斥，以及CSS形状和其它先进技术规范，让我们可以在习惯的方式之上探索更多的网站布局。但愿浏览器对它们的支持能够加速，微软Edge团队再加把劲吧！