CSS Float

The float property specifies how an element should float.

The float property has the following values:

left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is default
inherit - The element inherits the float value of its parent

Example 1: Float Right

In this example, the image will float to the right in the paragraph.

Pineapple Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.

Example 2: Float Left

In this example, the image will float to the left in the paragraph.

Example 3: No Float

In this example, the image will not float.

Example 4: Clear

The clear property specifies what elements can float beside the cleared element and on which side.

Without clear:

div1

div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.

With clear:

div3

div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left.

Example 5: The Clearfix Hack

If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. We can fix this using the "clearfix hack".

Without clearfix:

Lorem ipsum dolor sit amet.

With clearfix:

Lorem ipsum dolor sit amet.

Example

img {
  float: right;
}

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