Re: [CSS2.1-9.5] [CSS2.1-9.4.1] Block formatting context and Floats

On Mon, Jan 19, 2009 at 4:15 PM, Anton Prowse <prowse@moonhenge.net> wrote:
>
> This correspondence was confusing; however, the issue which I believe was
> being raised is a valid concern and needs clarification or resolution.
> Note that for convenience the relevant passages from the spec are quoted in
> their entirety at the bottom of this mail.
>
>
> 9.5 (Floats) states that the border box of an in-flow block formatting
> context B must not overlap(*) any float F in the same block formatting
> context P as the element itself, but does not refer to the margin box of B.
>  [Other floats, being out of flow, are excluded from this requirement; this
> is in keeping with the following sentence higher up in 9.5 which does
> explicitly refer to the margin box: "a floated box is shifted to the left or
> right until its outer edge touches the containing block edge or the outer
> edge of another float".]
>
> (*) if "overlap" should be taken to mean "overlap the margin box of F" then
> for what follows let m be the length the right margin width of F. Otherwise,
> if "overlap" should be taken to mean "overlap the border box of F", let m be
> zero.
>
>
> On the other hand, 9.4.1 (Block formatting contexts) states that a box B's
> left outer edge touches the left edge of the containing block P, even in the
> presence of the float F, unless B establishes a new block formatting context
> (in which case B may become narrower due to the presence of F).
>
> Then, irrespective of whether or not B becomes narrower, if the UA decides
> that B can sit next to F and if the left margin of B is less than the sum
>        s = (left margin of F) + (border area width of F) + m
> then B must be shifted rightwards away from the left edge of the containing
> block P.  The issue is that it is not clear by how much.
>
> Should the the right edge of F be coincident with the left /border/ edge of
> B or the left /margin/ edge of B?
> If the latter, does this hold equally when the left margin of B is equal to
> or greater than s?
> And are we talking about the right /border/ edge of F (m = 0)
> or the right /margin/ edge of F?
> If the latter, is there any need to exclude floats from the paragraph in 9.5
> referred to above?
>
> This issue is tracked for the current latest release of IE8 beta as
> https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=399822
> Resolving this issue before IE8 is finalized would be highly desirable.
>
>
> From CSS21:
> Section 9.5 Floats:
> http://www.w3.org/TR/CSS21/visuren.html#bfc-next-to-float
> 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.
>
> Section 9.4.1 Block formatting contexts:
> http://www.w3.org/TR/CSS21/visuren.html#block-formatting
> In a block formatting context, each box's left outer edge touches the left
> edge of the containing block (for right-to-left formatting, right edges
> touch). This is true even in the presence of floats (although a box's line
> boxes may shrink due to the floats), unless the box establishes a new block
> formatting context (in which case the box itself may become narrower due to
> the floats).

On a tangential note, I finally understand why setting
"overflow:hidden" solves so many float issues - it creates a new block
formatting context!  I happened to discover the issue outlined above
during a recent site design, where the ability to force the block
width to shrink so that its left edge moves away from a left float was
very useful.

A blog post needs to be written about this, I think.

~TJ

Received on Wednesday, 21 January 2009 14:50:38 UTC