Re: [CSS2.1-9.5] [CSS2.1-9.4.1] Block formatting context and Floats

Tab Atkins Jr. wrote:
> On a tangential note, I finally understand why setting
> "overflow:hidden" solves so many float issues - it creates a new block
> formatting context!

Indeed, the judicious use of BFCs is and will remain most important 
foundation of complex pseudo-grid layouts, until such time as CSS3 is 
widely supported, when we can use real grid layouts and reclaim each 
kind of BFC (especially floats) for their original intended purpose.

BFCs have several behaviours in common (including prohibiting margin 
collapsing[1], for example), but the most important one as regards 
pseudo-grid layouts is that they delimit the effect of the 'clear' 
property.  If a pseudo-grid layout is to be truly flexible and reusable, 
each grid cell needs to act as closed units in this way, since who knows 
where or when (typographically-used) floated and cleared children are 
going to be added.

> I happened to discover the issue outlined above
> during a recent site design, where the ability to force the block
> width to shrink so that its left edge moves away from a left float was
> very useful.

Would you be prepared to point us the example for this? I would love to 
know how people are finding this behaviour useful.[2]

> A blog post needs to be written about this, I think.

Certainly, BFCs are woefully poorly known and understood.  However, a 
quick web search does throw up a couple of useful articles, including 
one from a widely-read resource: 
http://www.communitymx.com/content/article.cfm?cid=6BC9D

Cheers,
Anton Prowse
http://dev.moonhenge.net

[1] http://lists.w3.org/Archives/Public/www-style/2008Dec/0201.html
[2] http://lists.w3.org/Archives/Public/www-style/2009Jan/0352.html

Received on Wednesday, 21 January 2009 21:40:51 UTC