From the course: CSS Essential Training

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Layouts with float

Layouts with float

- Before there was grid in Flexbox, the float property was used to create entire page layouts. This practice is now outdated, but float can still be used for other purposes. Also, you may still see it used in older legacy code bases, so it's good to have a basic understanding of how they work. Early web designs were often based on print designs like wrapping text around images. The float property was used to create this effect. Then eventually floats were used for creating entire page layouts. Better methods exist today, but float can still be used for its original purpose, wrapping text around images. Let's take a look at how the float property works in a CodePen example. I've added border and background styles to make it easier to see the boundaries of each element. Let's start by adding float left to the image. By default, content aligns on the left side, so it didn't appear to change the…

Contents