Re: [CSS basic box model] Proposal: new value for the clear property

> An (also popular) alternative way, which doesn't
> involve BFCs, is to use the "easyclearing" technique:
> 
> div:after {
>        content: ".";
>        display: block;
>        clear: both;
>        height: 0;
>        overflow: hidden;
> }
> 

I should also have mentioned the following:

1.) The easyclearing technique is the exact CSS equivalent of the
"clearing div" mark-up technique that Markus mentioned and which was the
Web's first popular solution to the float enclosing problem.

2.) When using the easyclearing technique, you also need to give IE6 and
IE7 'hasLayout'[1] since those browsers don't support generated content.
(hasLayout in IE<8 behaves a little bit like CSS BFCs.)

The div will already be hasLayout if you've given it a width or various
other CSS properties, but zoom:1 can be used to induce hasLayout
otherwise.  Note, however, that 'zoom' is not a valid CSS21 property
(although it's been proposed for later CSS versions).  If this is a
concern, introduce it using one of the well-known IE "filters".  For
example, a pure CSS-based approach
would be:

* html div {
 zoom: 1;
}
*+html div {
 zoom: 1;
}

which makes use of the "star html" and "star plus html" filters, which
only IE6 and IE7 respond to, respectively.  (Don't group the two rule
sets into one using ',' because IE6 will (correctly) ignore the
resulting rule set since it doesn't support the '+' combinator.)

[1] http://www.satzansatz.de/cssd/onhavinglayout.html

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

Received on Monday, 7 June 2010 19:46:26 UTC