Classic float layout: text wrapping, clear, clearfix containers, drop-caps, and block formatting contexts.
This paragraph flows around a left-floated box. The text should wrap to the right of the blue box and, once it extends below the box, return to the full width of the container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This paragraph flows around a right-floated box. The text wraps to the left of the red box. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
With a box floated to each side, the text column flows down the middle between them. When the text passes the bottom of both floats it expands to fill the full width again. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Some text beside the float.
This element has clear: both — it drops below the float instead of wrapping beside it.
The container uses a ::after { clear: both } clearfix, so its border wraps all six floated thumbnails instead of collapsing to zero height.
This paragraph begins with a floated initial letter, a classic drop-cap effect. The large "T" floats left and the remaining text wraps neatly around it for the first few lines before returning to full width. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
overflow: hidden, so instead of its background sliding under the float, it shrinks to sit beside it. Compare this with a normal block, whose background would extend under the floated box.