Re: [CSS 2.1] [section 9.5 Floats] Empty floated element with a set width but height:0

Tab Atkins Jr. wrote:
> Some further information:
> 
> We agree that a zero-height float (or a float whos bottom edge is
> incident with the top edge of a line box) doesn't force the line box
> out of the way in any browser.
> 
> A further question concerns zero-height floats which appear in the
> middle of a line.  For example:
> 
> <!DOCTYPE html>
> <div style="float:left; width:50px; height:5px; background:blue;"></div>
> <div style="float:left; clear:left; width:100px; height:0px;"></div>
> <span>foo</span>
> 
> The first float definitely shoves the text over by 50px.  The question
> is whether the 0-height float should further push it or not.
> 
> Chrome doesn't push it, but that's part of a general bug where Webkit
> doesn't take into account floats that don't intersect the top of the
> line box.  (Make the second float 5px hight and give it a background
> to see what I mean.)  So it's a wash, and tells us nothing.
> 
> Firefox doesn't push the text.
> 
> IE and Opera push the text.
> 
> If I'm recalling correctly (doesn't look like the comment made it into
> the minutes today), Dbaron said he'd be willing to change the Firefox
> behavior here (but it may make his current implementation strategy
> slightly more difficult).

Again, this is about continuities.  What if the second float's margin
area height were negative?  I'd expect (insist, actually) that it be
ignored for the purposes of line box shortening.  Should it stop being
ignored at zero height, or at positive height?  Positive height seems
the more sensible to me.

This is all rather theoretical at the moment, seeing as all the browsers
I'm testing in (IE8, Fx3.6, Op10.6, Sf5) go bonkers on even the
following simple test case in which all heights are positive. (I
currently don't have access to IE9.)

<!DOCTYPE html>
<div style="width:200px;background:gray">
 <span>text</span>
 <span style="float:left;height:5px;width:50px;background:red"></span>
 <span
style="float:left;clear:left;height:5px;width:100px;background:green"></span>
</div>

IE8 can't cope with the idea of two floats stacked one atop the other
next to the same line box.  Fx3.6 and Sf5 pretend the second float
doesn't exist.  Op10.6 lets its IE6 roots show through and bizarrely
sums the width of both floats together when calculating the line box
shortening.

(Although I can see where they're coming from in IE8, I can't say I'm
too sympathetic.  After all, if the first float is tall enough so that
its margin bottom doesn't have a line box next to it, then it no longer
has any problem with putting the second float flush underneath it.)

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

Received on Saturday, 7 August 2010 10:23:35 UTC