CSS Float

CSS float property specifies how and where an element should float within its container.

Using the float property, an element can float to the left or right of its parent container based on its float value.

In this CSS tutorial, we will discuss these floating techniques and the floating nature of elements in detail.

Float Left

Float Right

The float property can accept any of the following values:

  • left – The element floats to the left of its parent container
  • right – The element floats to the right of its parent container
  • none – The element does not float at all
  • inherit – The element inherits float value from its parent element

Let’s discuss each value in more detail:


CSS Float Left

If an element has a float value left, It will float to the left side of its parent container. The other elements will flow normally in the remaining space.

As you can see in the below example, first, the element having float: left; floats to the left of the container. Then, the remaining content flows normally in the available space, right to the floated element.

Float left
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Example:

.left{
  float: left;
  background: lightgreen;
}

CSS Float Right

CSS float: right; property is used to float an element to the right side of its containing block. Other elements flow normally in the remaining space.

As you can see in the below example, first, the element having float: right; floats to the right side of the container as much as possible. Then, the remaining content flows normally in the available space left to the floated element.

Float Right
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Example:

.right{
  float: right;
  background: lightgreen;
}

CSS Float None

This is the default value of the float property. Elements having float value none do not float anywhere in the container, instead, they are displayed according to their normal flow in the layout. See the example below:

No Float
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Example:

.no-float{
  float: none;
  background: lightgreen;
}

Content Overflow Problem

There may be a situation when the height of the floated element is more the its containing element. In such situations, the floated element overflows out of its container. See the example below:

Overflow
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.

This problem can be fixed using the overflow property. Simply set the overflow property to auto in the element’s parent container and the element will adjust automatically.

Example:

.no-overflow{
  overflow: auto;
}