How to confine the clearing of floated elements to their parent

In a columnar layout with floated side columns there may come a time when you want to float more elements in the unfloated centre column (such as images etc). The problem arises when you try to clear the image, perhaps to put a caption or text underneath, or you just want text to start on a new line. When you do this you find that the clear:both you added to the element you want cleared has caused the element to move below not only below your image but also below your floated columns also.

This is the element we want cleared but to remain just under the floated image

As you can see the clear:both on this element has forced it down below the left column. The solution is to wrap the content in a float of its own and the clearing behaviour is confined. Here is an example with the extra code added