W3C home > Mailing lists > Public > www-style@w3.org > January 2012

RE: [css3-flexbox] computing "float" and "clear" on children of a flexbox

From: Alex Mogilevsky <alexmog@microsoft.com>
Date: Wed, 25 Jan 2012 04:38:51 +0000
To: Daniel Holbert <dholbert@mozilla.com>, "www-style@w3.org list" <www-style@w3.org>
Message-ID: <D51C9E849DDD0D4EA38C2E539856928412E18B30@TK5EX14MBXC218.redmond.corp.microsoft.com>
That text is meant to say that 'float' and 'clear' are ignored on flexbox items. It should probably just say so, it would be more clear.

At time of cascading, 'float' and 'clear' are calculated as usual, they just have no meaning in flexbox layout.

If for example a child of a flexbox item with "float:left" has "float:inherit", that child should be a left float, even though it doesn't apply to the flexbox item.

There is a little bit of a chicken+egg problem here when 'float' is set on inline element:
	1) 'float' makes the element block-level
	2) flexbox accepts the element as a flex item (because it is block level) rather than wrapping it
	3) flexbox layout ignores 'float'

That's how it works in IE. Changing how 'float' affects block-level status would in fact be more complicated, exactly as you say.

I suggest just removing that sentence, or replace with a clarification for how that works.

Alex

-----Original Message-----
From: Daniel Holbert [mailto:dholbert@mozilla.com] 
Sent: Tuesday, January 24, 2012 6:34 PM
To: www-style@w3.org list
Subject: [css3-flexbox] computing "float" and "clear" on children of a flexbox

Hi www-style,

I've got a concern about how to compute the values of "float" and "clear" on direct children of a flexbox.

The spec says:
 > 'float' and 'clear' compute to their initial values on a flexbox item (section 2.1)

This is problematic, because when we're computing style, we can't tell whether we've got a flexbox item.  This is because the definition of "flexbox item" involves more than the style tree -- it depends on whether the target element is "atomic" (e.g. a replaced element).  So, we don't know whether to apply the above-quoted special case.

EXAMPLE:
Consider these two cases (img vs span):
   <div style="display: flexbox"><img style="float:left"></div>
   <div style="display: flexbox"><span style="float:left"></span></div> The <img> is replaced, so the spec says it should get a computed style of "float:none".  The <span> is not, so the spec says it should get a computed style of "float:left" (i.e. it should float inside of its generated anonymous wrapper block).

Is this a known issue?  Does this cause problems for other rendering engines' style systems as well?

Thanks,
~Daniel
Received on Wednesday, 25 January 2012 04:39:24 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:48 GMT