From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Clearing floats - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
Clearing floats
As important as the float property is to creating layouts, it would be practically worthless without the use of the clear property. The clear property allows us to turn floats off and restore normal document flow and together, floating and clearing allows us to exercise precise control over the flow of our layouts. To demonstrate that, I have the clearing.htm file open, and you can find that in 03_02 directory. Now, structurally it's very similar to the file we were using in our last exercise. As a matter of fact, if I scroll down, I can see that the only big difference is that instead of only having three elements, we now have six. For styling purposes, you'll notice we've got a lot going on just in the regular div rather than installed individually. All of the divs are being floated to the left, and they all have a little bit of margin to the right to give us a little bit of spacing. Okay. So I'm going to save this, and I want to preview this in my browser. Currently, you can see…
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.
Contents
-
-
-
-
-
Floating elements7m 50s
-
Clearing floats7m 28s
-
Containing floats7m 50s
-
Clearfix technique10m 38s
-
Floating inline elements14m 34s
-
Two-column floated layouts8m 17s
-
Three-column floated layouts11m 30s
-
Column height considerations7m 3s
-
Creating equal-height columns10m 42s
-
Floats: Lab5m 25s
-
Floats: Solution5m 21s
-
-
-
-
-
-
-