CSS Float
Browsers follows line by line order in displaying HTML documents. But with CSS Float property, the line by line order can be discarded and can make the HTML elements to float left or right.
Mostly CSS Float is used to make images float to make the text appear in the sides of the images instead of next line, like shown below.
This is text floating on the left.
The float property is applied to two div tags, the code is shown below.
Try editing it in the preview page and see what the difference.
Example
The HTML elements can float only left or right, not up or down.
Float Left CSS
If you specify the float property to be left, the HTML element will try to float to left as much as possible.
Float Right CSS
If you specify the float property to be right, the HTML element will try to float to right as much as possible.
CSS Float Example
<div style="float:left; width:50%;"> <p>This is text floating on the left.</p> </div> <div style="float:left; width:50%"> <img src="img/final.jpg"/> </div>
Preview
Float Clear
The HTML elements below the floating HTML elements will flow around it in the empty space.
To avoid it, the property "clear" with the value "both" is used as shown in the below code.
<div style="clear:both;"> </div>
