First of all what does float property really do basically the css  float property lifts an element up from the normal content flow and shifts it to either the left or right edge of the page, where it hovers or floats above other content. Any nearby elements text wraps around the floating elements.

The float CSS property can accept one of 4 values: left, right, none, and inherit. It is declared as shown in the code below.

#sidebar {
  float: right;
}

The most commonly-used values are left and right. A value of none is the default, or initial float value for any element in an HTML page. The value inherit, which can be applied to nearly any CSS property, does not work in Internet Explorer versions up to and including 7.

Content boxes that follow are rendered along the side of the floated element; down the right side of elements floated to the left, and down the left side of elements floated to the right. This property controls this floating behavior, specifying an element float to the left, right, or not at all. For correct rendering, a floated element needs to have an intrinsic or assigned ‘width’ value so we can say that if  the  floating  element  is  contained within  another  block  element,  it  floats  against  the  edge  of  that  element  instead if you want it to float a bit of distance away from the edge, you can  set  a  margin  on  the  floating  element.

New  web  programmers  often don't  understand  the  difference  between  floating  and  alignment .They  decide  that  if  they  want  something  on  the  right  side  of  the  page,  they  should  always  float  it right.  But  floating  is  a  more  drastic  measure  than  simple  alignment. A  floating  element  is  removed  from  the  normal  block  flow  of  the  document other  block  elements  lay  themselves  out  around  and   underneath the floating element ignoring it for layout purposes. But the inline content within those block elements does respect the floating element and wraps neatly around it. The rule of thumb is, if you simply want something on the left or right side of the page, align it. If you want it to hover on that side of the page with other content wrapping around it, float it.

things to remember before using floated elements

• An inline element that is floated is converted to a block-level element
• Margins of floated boxes do not collapse with margins of adjacent boxes
• A left-floated box will shift to the left until its leftmost margin edge (or border edge if  margins are absent) touches either the edge of the containing block, or the edge of another floated box
•  If the size of the floated box exceeds the available horizontal space, the floated box will be shifted down