hello, i want to ask about float property and how it works ......thanks

Hi Sandeep.

When a HTML element is floated, it is taken out of what is called "Normal Document" Flow. Normal flow for a HTML document is that elements are stacked on top of each other in the browser. The exceptions for this is if an element is an inline element as these elements do not take on width properties or block level display properties, so you'll find that these elements automatically stack side by side of each other on the same line.

That is what floats are used for. It's a layout technique that allows elements to stack side by side of each other and the elements float around as best as they can within the available space. This kind of works like text floating around an image in desk top publishing.

In order to give the rest of the document normal flow after you have floated an element, you'll need to apply a trick called a clearfix.

A common use for this is to make sure a website footer displays properly. A clearfix looks like this.

.clearfix {
   display: table;
   content: "";
   clear: both;
}