Skip to content
CodeSweetly Logo CodeSweetly Logo CodeSweetly
Blog

CSS float Property – How to Float Elements in CSS

float removes an element from the document’s normal layout flow and relocates it to the right or left of its container.

Examples of the CSS float Property

Below are some examples of how the CSS float property works.

Note the following:

  • float: none will not float the selected element. This value is the default.
  • float: right places the selected element to its container’s right side.
  • float: left positions the selected element to its container’s left side.
  • float: initial sets the float property to its default value.
  • float: inherit inherits its parent element’s float property’s values.

Float image to the right

img {
  width: 250px;
  float: right;
  margin-left: 17px;
  margin-bottom: 10px;
}

Try it on StackBlitz

The snippet above used the float property to float the image to the right side of its container.

Float text to the left

p::first-letter {
  font-size: 6.7rem;
  float: left;
  font-family: algerian, "Courier New", Courier, monospace;
  margin-right: 10px;
}

Try it on StackBlitz

The snippet above used the float property to float the paragraph element’s first letter to the left.

How to Fix Overflowing Floating Elements

Suppose your floating element’s height is taller than its container. In that case, the floating element will overflow.

Here’s an example:

div {
  background-color: #fff29c;
  border: 3px solid #301551;
  color: #301551;
  padding: 10px;
}


img {
  float: right;
  width: 60%;
  margin-left: 5px;
}

Try it on StackBlitz

There are three ways to prevent a floating element from overflowing its container.

  1. Implement the clearfix hack
  2. Use the CSS overflow property
  3. Set the container’s display property to flow-root

Let’s discuss the three ways below.

How to use the clearfix hack to fix overflowing floating elements

The traditional way to prevent a floating element from overflowing its container is to use the CSS clear property in a hacky way like so:

  1. Use the ::after pseudo-element and the content property to insert new content as the container’s last child.
  2. Make the new content a block-level element.
  3. Clear both sides of the new content.

Here’s the code:

div {
  background-color: #fff29c;
  border: 3px solid #301551;
  color: #301551;
  padding: 10px;
}
div::after {
  content: "";
  display: block;
  clear: both;
}
img {
  float: right;
  width: 60%;
  margin-left: 5px;
}

Try it on StackBlitz

How to use the CSS overflow property to fix overflowing floating elements

An alternative way to prevent a floating element from overflowing its container is to set the container’s overflow property to an acceptable value other than visible.

Here’s an example:

div {
  background-color: #fff29c;
  border: 3px solid #301551;
  color: #301551;
  padding: 10px;
  overflow: auto;
}


img {
  float: right;
  width: 60%;
  margin-left: 5px;
}

Try it on StackBlitz

Using the overflow property may create unintended effects like scrollbars or clipped shadows.

How to use flow-root to fix overflowing floating elements

An elegant way to prevent a floating element from overflowing its container is to set the container’s display property to flow-root.

Here’s an example:

div {
  background-color: #fff29c;
  border: 3px solid #301551;
  color: #301551;
  padding: 10px;
  display: flow-root;
}


img {
  float: right;
  width: 60%;
  margin-left: 5px;
}

Try it on StackBlitz

Unlike the overflow property, flow-root does not produce unwanted effects. Instead, it only establishes a new block formatting context (BFC) for the selected element’s content.

Support CodeSweetly