Basic usage #
The main function of the float property is to make the content floats around an element. I.e. if you need a text wrapping an image you should set float to the image. For example:
And the result is:
There are four possible values of float - left, right, none (default) and inherit. I think that they are self-explanatory.
What you should remember is that the floating continue until you clear it. In other words, no matter how many elements you add they will still wrap the floated block. In the example below the <footer> element should be below the image, but because there is no clearing it looks like that: