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

Re: [CSS21] 9.5.1: placing floats above earlier blocks & line boxes

From: Alan Gresley <alan@css-class.com>
Date: Fri, 15 Oct 2010 01:07:05 +1100
Message-ID: <4CB70E89.2010809@css-class.com>
To: Peter Moulder <peter.moulder@monash.edu>, www-style@w3.org
Peter Moulder wrote:
> On Thu, Oct 14, 2010 at 04:20:21PM +1100, Alan Gresley wrote:
>> Peter Moulder wrote:
>> [snip]
>>> I must say that as someone without much CSS authoring experience, I can't say
>>> I like the idea of allowing floats to overlap previous text, and I have
>>> difficulty seeing the use cases.  I'd have thought it easy enough to implement
>>> rule 6 as written (though I'll grant it nevertheless does have some
>>> implementation cost compared to the behaviour I see implemented).
>> Firstly the floats do not overlap previous text.
>> [Rather, the previous text overlaps the floats.]
> Sorry for creating misunderstanding: I was intending "overlap" as a symmetric
> relation defined solely in terms of x,y axes, and didn't intend to convey
> anything about z axis.

More precisely it's painting order.

> In terms of z axis, the float occludes backgrounds & borders of earlier blocks
> (and more generally items 1–4 of zindex.html), and is occluded by inline-level
> boxes of earlier blocks (and more generally items 6–10 of zindex.html).

Yes, correct.

>> BTW, what do you think having a top
>> negative margin does to the layout?
> I believe Alan Gresley's point here is that large negative margins do have
> their uses, and that these uses may well involve use of floats.

No, I'm simply saying that a block that has a negative top margin 
causes that block and any following block to be moved upwards by 
height of the negative top margin. You have introduced a ripple or 
fold in the canvas. Like so.

\|/       ________
  |   ^   |Block with Float
  |   ^   |
\|/  ^  \|/
-------- |

Negative margins are cool when they work. Load up the following test 
case in any good browser. The block with a negative top margin has a 
blue top border. The block before this element (with negative margin) 
  has a orange bottom border.


Now take a look at the same test in IE7. The clearing block compounds 
the bug and causes the last silver box to become unstable (pee-ka-boo 
activity). After this point, the layout is crippled. How many web 
designers would use this technique if wanting to support IE7?

> [And no, I can't say I know what those uses are, and would ignorantly think
>  that tables or floats would work at least as well...  Hence the two
>  disclaimers of ignorance in CSS authoring in my initial message.]
> pjrm.

I should add that what happens with negative margins is in the spec 
for 9.5.

   | A float can overlap other boxes in the normal flow (e.g., when
   | a normal flow box next to a float has negative margins). When
   | this happens, floats are rendered in front of non-positioned
   | in-flow blocks, but behind in-flow inlines.

Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Thursday, 14 October 2010 14:07:33 UTC

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