In CSS, the shrink-to-fit algorithm is applied to positioned elements, table elements and floats. This algorithm comes into play when an element has no stated dimensions (no width or height). In this particular case, the actual dimensions of the element will be determined by the amount of content that it contains. In other words, if you have a float with no dimensions and you put a 100 x 100 pixels image in it, then your float will have the same dimensions as the image. Of course margins, borders and padding, if specified, are added to the total dimensions of your shrink-to-fit box.
Consider the example of an absolutely positioned box:
#container {
width: 400px;
height: 400px;
position: relative;
}
#child {
position: absolute;
top: 0;
left: 0;
}
The child element has no stated dimensions, so the shrink-to-fit algorithm is applied here. You can see the result in the picture below.
As you can see, in this case the final dimensions of the box are determined by the amount of text in it. This particular algorithm is very handy when you want to have fluid elements that expand and contract according to the content inside them.