From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Clearing floats

Clearing floats - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

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…

Contents