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
From the course: CSS Essential Training
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.