CSS Float Property 

By float property, an element is float in the left or right, from which the surrounding elements surround it around it. This creates column layouts that make the webpage even more beautiful.

Originally float property was designed to create a simple layout in which an image is float inside a text column. As you can see in newspapers or text books.

But the web developer felt the need to float another element just like images, and then it used to float another element apart from the property images.

Now this property is one of the most commonly used properties of web developers. Through this property you can organize by floating elements in the webpage.

The float property can have 5 possible values. These are being described below.

  • left – This value is float in the element left side.
  • right – This value is float in the element right side.
  • none – This value does not have an element float and in that sequence it is show in the same sequence.
  • initial – From this value the property is set from the default value.
  • inherit – This value is inherited from the parent element of the property.

Examples

img {
    float: left;
}
.thumbnail {
    float: left;
    width: 125px;
    height: 125px;
    margin: 10px;
}
img {
  float: right;
}

img {
  float: left;
}

img {
  float: none;
}