CSS Float and Clear Property

CSS Float property is used for positioning on web pages. This is used to float or move HTML element to the right or left side of its container.

The Float property allows us to position block-level elements side-by-side instead of on top of each other. As HTML elements are placed along the left or right side of its container, this allows text to wrap around it.

Important Key Points:

  • Absolutely positioned HTML elements ignores the float property!
  • After float elements, next elements will flow around it. To avoid this, clear float using clear property.

CSS Float property is one of the difficult or confusing concepts of all positioning properties. Its behavior can be unexpected for beginners. Because float not only applies to current HTML element but also influences its surrounding elements.

You will be able to understand ‘float’ better once we will work with an example.

CSS Float Property Types:

CSS float property can have following values:

  • left – floats element to the left of its container
  • right- floats element to the right of its container
  • none – The element does not float. This is the default value
  • inherit – It will inherit the float direction from its parent

Run This Program

In this program, we have set float right to the image. Now the image will move to the right side of the container and next HTML element will float around it. This is how Float property in CSS works.

Webpage layout using CSS float

You can create webpage layouts using float. Float is very useful to create a different kind of blocks & layout structure in webpages.

We will learn more in CSS Layout chapter.

Congratulations! Chapter Finished. Do you want to practice more?
Exercises & Assignments
  • No Content Found.
  • Interview FAQs
  • No Content Found.