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

On Sun, Jun 6, 2010 at 12:58 PM, Markus Ernst <derernst@gmx.ch> wrote:
> I suggest to add a value "inside" (or whatever better keyword) to the clear property. clear:inside will be applied to the containing element of the floating blocks, rather than to the following element.
>
> Use case 1: A box with images inside, with a background color and a border around the box.
>
> <div class="imagebox">
>  <img src="img1.jpg" alt="">
>  <img src="img2.jpg" alt="">
>  ...
> </div>
>
> .imagebox {
>  border:2px solid red;
>  background:yellow;
>  clear:inside;
> }
> .imagebox img {
>  float:left;
>  margin:10px;
> }
>
> Without clear:inside I need to add a clearing element such as <div style="clear:left"> as the last element of the box, which is ok as a workaround, but not as a concept.
>
> Use case 2: A horizontal navigation with a background.
>
> <ul id="mainNavi">
>  <li><a href="page1.html">Page 1</a></li>
>  <li><a href="page2.html">Page 2</a></li>
>  ...
> </ul>
>
> #mainNavi {
>  background:red;
>  list-style:none;
>  clear:inside;
> }
> #mainNavi li {
>  display:block;
>  float:left;
>  margin:0.2em;
>  background:yellow;
> }
>
> Without clear:inside I need to wrap the ul element inside a div with the background color, and add a clearing element (or maybe apply some display:table-* trickery, which is unintuitive too).

The current popular hack to make this work is to apply overflow:hidden
to the container.  That, or using table-*, or any of the other similar
hacks, all have the effect of making the container a "block formatting
context" or BFC.  BFCs don't allow their child floats to escape from
them, or allow sibling (ancestor?) floats to intrude into them either.

There's been requests before for ways to force an element into
becoming a BFC, which would solve this without the side effects of
applying overflow or using display:table.  That would work.

The only thing I'm not sure of is if it's strictly necessary to summon
up a full BFC to solve the case of making a container wrap its
descendant floats.  It may be that it's sensical to create a
lower-octane property that does *just* this.  But then again, it might
not make sense to wrap floats without being a BFC.  I'm not quite
knowledgeable enough on the arcane details to tell whether it makes
sense to slice the concepts any thinner.

In any case, though, I don't like the specific approach advocated
here.  ^_^  I can easily want an element to both wrap its descendant
floats, *and* clear any sibling floats.  The current ability of
'clear' and what is being proposed here are thematically related, but
functionally perpendicular.  We'd either have to let 'clear' accept
two values (like "[left | right | both] || inside") or create a
separate property for this ability.

~TJ

Received on Monday, 7 June 2010 17:16:49 UTC