Re: breaking overflow

On Dec 30, 2009, at 12:14 AM, Niels Matthijs wrote:

> Hi all,
>  
> I was just wondering about the overflow property the other day. In many cases it is used to fix certain “unwanted” behaviour. >From what I know, it has a nice effect on breaking collapsing margins

"Vertical margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children." [1]

Collapsing margins is a nice effect that is not broken or in need of a fix. In certain situations it may not be desired for in-flow children, and so this side-effect of 'overflow:hidden|scroll|auto' can be used to prevent it. It is not the only way to prevent it, or even to create a block formatting context, nor is it the reason why we have the overflow property in the spec.

> and clearing floats.

"...an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. " [2]

If the 'clear' property doesn't help in some situations, then there are other ways to establish a block formatting context (which does not necessarily clear, but may still create the effect you want). Or you can still use the side effect a little more creatively, so as not to interfere with your curved corners:

.clearer:before { content:''; width:100%; display:block; overflow:hidden; }

> In an older discussion it was also suggested as a fix for nested elements with backgrounds defined spilling over rounded corners set on parent elements.
>  
> The problem as I see it is that overflow:hidden is used for some effects that have little to do with the overflow itself.

If an author uses the side effect of a property just for the side effect, it is a bit of a hack, and the author must accept that the property also has a main effect. The main effect of 'overflow:hidden' is to hide content that overflows the inner or outer edge of the element's border (as determined by ‘background-clip’).

> It’s already a little annoying, but in the case of rounded corners it would become a real mess.

Can you give any examples, where 'overflow:hidden' is used to create a BFC, and having items that overflow the border would be a mess if clipped to that curve but not a mess when clipped to the box?

> (you can’t have elements break out from the parent just to “protect” your rounded corners?)

It is not just to protect rounded corners, it is to clip content outside that parent. It has always done so, and rounded corners do not change that. Children that go out of bounds get clipped. The 'border-radius' property just clarifies more precisely where that clipping takes place, and makes it consistent with where backgrounds get clipped. [3]

>  So I was wondering whether we are trying to avoid using overflow:hidden for unrelated effects (more control over clearing and collapsing margins)

The side effects are not as important as the central effect of hiding overflow. Content appearing outside of the appropriate curve of the border is rightfully considered overflow.

> or whether it would be good to have a break-overflow property, allowing a certain element to break out any overflow:hidden set on its parent?

Well, that sounds interesting, and potentially useful, and not just for those who are using BFCs to achieve other effects. 



[1] http://www.w3.org/TR/2009/CR-CSS2-20090908/box.html#collapsing-margins
[2] http://www.w3.org/TR/2009/CR-CSS2-20090908/visuren.html#floats
[] http://www.w3.org/TR/2009/CR-css3-background-20091217/#the-border-radius