The CSS Float Properties

Float is a feature in CSS which is used to move an element around. It is one of the most useful features that you can use in order to customize a page.

Uses of CSS Float

CSS float can be used in order to move elements horizontally. That feature would allow other elements to be able to wrap around an element. Float is most often used for images, but sometimes it can also be used for creating layouts on a page.

How Elements Can Float

Elements can only be made to float from left to right or right to left. This means you cannot make elements to float vertically. Elements will move as far as they can on either side. The floating element would have other elements float all around it. If there are any elements that are before it, that would not be affected by the float. When an image is floated towards the right of the page then elements after it would wrap to left.

Here is an example code for CSS float:

img
{
float:right;
}

How to Float Elements Next to Each Other

When you let several elements float on a single page, then they would start floating round each other as long as there is room for them to move. Here is a sample code on how you can float several elements together:

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

 

How You Can Turn Off Float

We have mentioned how the elements that you will be placing after a floating element would start to flow around it. In order to turn off that feature what you can do is to use the clear property. That would prevent the other elements from flowing around.

When you utilize the clear property, you can specify which side of the element it is that others would not be allowed to.

The Float Properties

There are two main float properties that can be used today in CSS. These are the clear and the float.

Clear Property

The clear property would specify which side of the element is not allowed for other elements. There are several values for the clear property:

  • Left- This means that there would be no floating elements that would be allowed on the left side.
  • Right- This means that there would be no floating elements that would be allowed on the right side.
  • Both- No floating elements are allowed on either side.
  • None- No floating elements would be allowed anywhere.
  • Inherit- This value means that the clear property would derive from the parent element.

Float Property

This property would determine whether an element would float or not. Here is an example code for that:

img
{
float:right;
}

 

These are the values for the float property:

  • Left- This means that the elements float to the left.
  • Right – This means that the elements float to the right.
  • None- This means that no elements would float.
  • Inherit- This means that the value of the property would be derived from the parent element.

These are just some of the basic things that you should know about CSS float.

Separator image .