Similar to Position property, float is also used to position elements.
float
Applicable Values:
left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the ‘clear’ property).
right
Similar to ‘left’, except the box is floated to the right, and content flows on the left side of the box, starting at the top.
none
The box is not floated.
HTML Snippet:
<div id="testPage">
<div class="element float-left"> A </div>
<div class="element float-left"> B </div>
<div class="element float-left"> C </div>
</div>
CSS Snippet:
#testPage{
background-color : #e1e1e1;
margin:40px;
height : 500px;
padding : 10px;
}
.element{
background-color : #ECB643;
width : 30px;
height : 30px;
margin : 10px;
padding : 10px;
}
.float-left{
float : right;
}
Output:
All the float elements will be queued on the right side with the first element on the right end.
