CSS floats: the shrink-to-fit algorithm

In the CSS specifications, the shrink-to-fit algorithm applies to floats, tables and absolutely positioned elements without a stated dimension (usually a width). In simple terms, when one of these elements doesn't have a stated dimension, its actual dimension is given by the amount of content contained in the element itself, plus any border, margin or padding declaration which will be added to the sum in order to determine the actual size of the element. For example, if you have a markup like this:

<p><span class="alignleft">Test</span>Content</p>

with the following styles:

span.alignleft {
  float: left;
  background: yellow;
  border: 2px solid orange;
  padding: 4px;
}

the actual dimension of the floated element will be determined by 1) the content of the element; 2) the border declaration; 3) the padding declaration. I've summarized most of the possible combinations on this test page. Alan Gresley made some interesting tests here.