[CSS21] float rules when interacting with floats outside containing block

In CSS 2.1, the rules in
http://www.w3.org/TR/CSS21/visuren.html#float-position define the
position on floats relative to all earlier floats within the same
block formatting context.  This means they do require consideration
of other floats that are in the same block formatting context, but
not within the containing block.

There's a significant case here where browsers don't actually match
what the rules say.  The question is whether to consider earlier
floats that are in the same block formatting context, but whose
horizontal coordinates do not overlap the horizontal coordinates of
the new float's containing block.  This can happen because there's a
width or margin on the inner block, in situations like this:


   +----------------------------------------------------------+
   | Block A                                                  |
   |                                                          |
   | +--------+                                               |
   | |Float in|                                               |
   | |Block A |     +----------------------------------------+|
   | |        |     | Block B                                ||

The question is whether we consider the "Float in Block A" when
placing floats whose containing block is Block B (which has a big
left margin).

This question affects three of the rules for positioning floats:
rule (3), rule (5), and rule (7).  I wrote testcases for these
cases:
  http://dbaron.org/css/test/2009/float-outside-tests/
(I tried to make the testcases show what was going on visually, at
the cost of making them a drop more complicated.  I'm not sure if
that was worth it.)

We're in a situation where there's a lot of agreement between
implementations, but it doesn't match the spec.  In particular, I
tested four browsers:

  Firefox 3.1beta, Opera 9.63, and Safari 3.2.1 all show the exact
  same behavior:
    + do NOT consider the float for rule 3
    + do consider the float for rule 5
    + do NOT consider the float for rule 7.

  IE7 is slightly different.  It does not consider the
  outside-the-block float for any of the three cases.

  CSS 2.1 says that the float should be considered in all three
  cases.

(I suspect this is because Hixie had a testcase for rule 5 in this
case, or something like that.)


When I accidentally changed the behavior in Firefox's trunk nightly
builds, we got a bug report about the changed behavior breaking a
real Web site the next day:
https://bugzilla.mozilla.org/show_bug.cgi?id=472252
although that change was actually not related to the float placement
rules, but rather to the rules that allow displacing block
formatting contexts in
http://www.w3.org/TR/CSS21/visuren.html#floats :
  # The border box of a table, a block-level replaced element, or an
  # element in the normal flow that establishes a new block
  # formatting context (such as an element with 'overflow' other
  # than 'visible') must not overlap any floats in the same block
  # formatting context as the element itself. If necessary,
  # implementations should clear the said element by placing it
  # below any preceding floats, but may place it adjacent to such
  # floats if there is sufficient space. They may even make the
  # border box of said element narrower than defined by section
  # 10.3.3. CSS2 does not define when a UA may put said element next
  # to the float or by how much said element may become narrower. 
The above tests directory also contains two tests covering this
case, in which all four browsers mentioned disagree with the "must
not overlap" rule quoted above.


It seems like we should probably adjust the spec for these cases,
although I'm not exactly sure how.

-David

-- 
L. David Baron                                 http://dbaron.org/
Mozilla Corporation                       http://www.mozilla.com/

Received on Tuesday, 27 January 2009 23:58:00 UTC