My CSS Layout Project

Floating Layout Demonstration

This paragraph demonstrates text wrapping around a floated image. The image uses the float: left; property. It also utilizes padding inside the border, a solid border, and margins outside the border to push this text away so it doesn't bump right up against the image frame. Floating was the original way to create complex layouts before Flexbox and Grid were introduced, but it is still highly useful for magazine-style text wrapping like this!

Notice how the text naturally flows around the right side and bottom of the image. A clearfix has been applied to the parent container so that the section correctly wraps around the floated image without collapsing.