Floats are pretty useful, but the only snag is that we can only float left or right and not in the center (or anywhere else for that matter). And if we have two adjecent divs or columns, we can't have the float affect the text-flow in both columns. Thankfully, this will change with CSS Exclusions.
First thing to mention is that the image isn't a true float anymore, because it is actually just positioned absolute. The image is now called an exclusion, and its shape should be excluded from the text around it.
To get this thing working we have to do two things: make the exclusion have
absolute;, and define the way the content wraps around the exclusion with the
property. You can see the possible warp-flow values in the examples above.
You can influence wether or not the surrounding content should wrap around the the exclusion
or not. Setting
wrap-through: none makes the element ignore any exclusion it encounters.
Very useful, and it's just the tip of the iceberg of what CSS Exclusions has to offer in the future. These kind of features allow us to create layouts that were previously either impossible, or only possible with ginormous amounts of hacking (which makes us feel dirty inside afterwards).
Is it real world proof then?
Cool as they might be, this is where they come up short. Nope. Sorry. You could, theoretically, but the positioned floats only work in IE10. Thanks to Adobe there is experimental support in Chrome Canary for some other (truly awesome) exclusion features, but work is still in progress. And even in IE10 it's not the most stable feature out there — we managed to crash the browser once or twice while playing with multiple exclusions.
Show me the source!
Feel free to look around the differente source files we used for this example.