248 Chapter 19
The CSS Exclusions Module (http://www.w3.org/TR/css3-exclusions/)
addresses this problem. CSS Exclusions defines a way to flow text around
any element, regardless of whether the element itself is floated. Figure 19-4
shows an element positioned over some text. In the example on the left, the
element doesn’t interact with the text, but on the right, it acts as an exclusion
element—it behaves as if it was floated, and the text flows around it on both
sides.Figure 19-4: On the left, an element is positioned above text; on the right, a floating exclusion element has
text flowing around it.
You create an exclusion element with the wrap-flow property, which
accepts a single keyword value:E { wrap-flow: flow-direction; }The flow-direction keyword sets the sides of the element around which
any inline content flows. You can control the flow with one of several values;
each of these is shown in Figure 19-5:• The clear value means content will not flow around either side of the
exclusion element (A).
• The both value flows inline content around both sides (B).
• The start value means inline content flows around the left side of the
element (if the writing direction of the document or element is left-to-
right), leaving the right side empty (C).
• The end value does the opposite of start: Inline content flows around
the right side of the element, leaving the left side empty (D).The minimum and maximum keywords flow content around the side of an
element with either the lesser or greater (respectively) distance between the
side and the nearest side of its containing element. Using the examples in
Figure 19-5, maximum would be equivalent to start (C) and minimum to end (D).
The default keyword value is auto, which means no exclusion will be
created—the content flows beneath the element, as shown on the left in
Figure 19-4.
As I write this, Internet Explorer 10 and 11 support CSS Exclusions,
using the -ms-wrap-flow property and without the minimum keyword value.