What is CSS float ?

CSS float is one of the trickier CSS concept to understand. Once grasped we can build awesome websites with float based layout.
Before diving into the concept, lets understand common usage of float property.

Where it will be used?

• CSS float plays a major role in building website layouts.
• It is used in Creating image gallery
• It helps to Wrap contents Around an image, just as we see in a newspaper.
• Allows to shift a block level element to either right or left side of a page.

How it will Behave and what are its traits of floats ?

• CSS float property removes an element from the normal document flow.
  Eg: float left places an element on the left most side until it reaches its parent element’s border.
• To Apply float property, an element must have a fixed width, or it should be a block level element.

Let’s see the implementation.

How to write CSS Rules? 

To be placed inside HEAD section of HTML

How to write HTML markup?

To be placed under BODY section.

Place the above code in float_left.html file and run it in the browser.

Output will look like,