W3C home > Mailing lists > Public > www-style@w3.org > June 2010

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

From: Anton Prowse <prowse@moonhenge.net>
Date: Mon, 07 Jun 2010 21:45:04 +0200
Message-ID: <4C0D4C40.6090601@moonhenge.net>
To: "www-style@w3.org" <www-style@w3.org>
CC: "Tab Atkins Jr." <jackalmage@gmail.com>, Markus Ernst <derernst@gmx.ch>

> 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

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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:36 UTC