Is there a proposed CSS3 “soft floating” property?

Does anyone have any idea if there is anything planned in the html5 or CSS3 spec regarding the floating of elements.

I titled this question "soft floating" as I'm interested in the idea of giving a group of elements css properties something like the following...

imagine if you will a styled list of images...

<u开发者_如何学Gol>
<li><img src='1.jpg'></li>
<li><img src='2.jpg'></li>
<li><img src='3.jpg'></li>
<li><img src='4.jpg'></li>
<li><img src='5.jpg'></li>
<li><img src='6.jpg'></li>
<li><img src='7.jpg'></li>
<li><img src='8.jpg'></li>
<li><img src='9.jpg'></li>
</ul>

and styled with:-

ul{
list-style:none;
}
li{
float:left;
}

imagine the images are of fairly random heights, say between 50 and 100 pixels high.

Currently floating these left might result in one or more of the images snagging, resulting in the rest of the floats also being out of place ( visually, but not actually wrong as far as browser rendering is concerned).

I'm wondering if there might be any kind of proposal or attribute for some kind of "soft floating" whereby elements pushed out by the right hand extent of the floated element(s) container would be effectively carriage returned/cleared past the bottom edge of all preceeding floated elements.

Wow. Does any of that make any sense whatsoever...?

---

I think I see what you’re on about.

I think your desired layout is already achieved by display: inline-block. See http://jsfiddle.net/pauldwaite/6eh23/

If that’s not what you were going for, then as far as I know, there aren’t any proposals along these lines.

However, I don’t follow the new specs very closely. If there were something like this, I think it would be in one of the following CSS3 modules:

• Template Layout
• Grid Positioning
• Flexible Box Layout

You can browse through the other specs-in-progress on the CSS “Current Work” page:

• http://www.w3.org/Style/CSS/current-work

---

Consider the following example:

HTML:

<div>
    <!-- Images of varying heights -->
    <img src="[location]" alt="" />
</div>

CSS:

img { vertical-align:middle; }

This will achieve the effect of 'soft floating' (I think). If you require any other HTML other than the images, then you could have issues, depending on the HTML. I reckon you could get away with adding more inline elements, however block elements would break this unless you floated them, raising the original problem.

I think the idea of soft floating would be hard for browsers to calculate, due to the nature of floated elements and how they are supposed to behave. Unless you specified the height of the floated element then IIRC this would only be known at runtime after the element has been rendered? using Javascript to calculate such height/width.

Typically, I think it is best to know the biggest height of an image that will be used in the page, and set the height of the floated element to that. The same for the width of the element. I'm not sure soft-floating would be a good idea.