I have the common case with a background wrapper and floated columns inside. Like this (though column tags may vary):
<div class="wrap fx-lift">
<figure class="col"></figure>
<aside class="col"></aside>
</div>
Everything went fine ( .wrap {overflow: hidden;} ) until the design was decorated with shadows aka "lifted corners" (.fx-lift). Those shadows are set through :before and :after pseudo-elements, by applying the following class to wrappers (there're few of them across the page).
.fx-lift:before, .fx-lift:after {
content: "";
position: absolute;
z-index: -1;
left: ...
bottom: ...
box-shadow: ...
etc.
}
So, this has brought few restrictions: no more usage of overflow: hidden; on .wrap because it hides the shadows.
The clearfix clear: both;, applied to .wrap:after also makes no sense, because of the absolute positioning in shadow's rule.
Floating the .wrap solves this problem partially, but creates two more. First, the width collapses in some cases; width can't be given a defined value (in px or %) - it varies depending on parents', that also have strict paddings in 'px'. Second, again no spare place for "clear: both;" after the floated wrapper.
So, my "wrapping skill" ends up with adding something like <br clear="both"> in the bottom of div.wrap. Actually, it solves everything, but - yukk, you know :) - is this the only way left to wrap the elements? Or am I just missing something else?
http://jsfiddle.net/D5hUu/703/
In fiddle there's the <br>-method enabled. Other are turned off by comments in CSS. Try and see, hope you'll have a better idea.
