AtoZ CSS Screencast: Float and Clear

The float property is most commony used for page layout.

However, the original purpose of float was to allow text to wrap around an object, something commonly seen in print design.

As float is often not used as originally intended, working with it can be a bit fragile and a bit tricky until you get used to its quirks.

We’ll look first at the intended use of float. Then we’ll look at creating 2 and 3 column layouts and finish up by looking at how to deal with some of the tricky parts of floats; clearing them and dealing with container collapse.

Intended use

The float property accepts 3 values, left, right or none.

If we take an image and a couple of paragraphs of text and float the image to the left, we see the intended use of the float property on the web; the text wraps around the image, and everything looks great. We can move the image to the opposite side by setting float:right or remove it completely with float:none which is the default.

Continue reading %AtoZ CSS Screencast: Float and Clear%

by Guy Routledge via SitePoint