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.

Note

• Although float removes an element from the normal flow, in contrast to absolute positioning, the element remains part of the flow—browsers only move it to the left or right of its container.
• float does not work with an absolutely positioned element.
• The CSS float property allows text and inline elements following the floating element to wrap around it.

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

CSS

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

HTML

<p>
  <img
    src="https://cdn.pixabay.com/photo/2020/02/05/13/02/waterfalls-4821153_960_720.jpg"
    alt="Waterfall"
  />Far far away, behind the word mountains, far from the countries Vokalia and
  Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
  right at the coast of the Semantics, a large language ocean. A small river
  named Duden flows by their place and supplies it with the necessary
  regelialia. It is a paradisematic country, in which roasted parts of sentences
  fly into your mouth. Even the all-powerful Pointing has no control about the
  blind texts it is an almost unorthographic life One day however a small line
  of blind text by the name of Lorem Ipsum decided to leave for the far World of
  Grammar. The Big Oxmox advised her not to do so, because there were thousands
  of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind
  Text didn't listen. She packed her seven versalia, put her initial into the
  belt and made herself on the way. When she reached the first hills of the
  Italic Mountains, she had a last view back on the skyline of her hometown
  Bookmarksgrove, the headline of Alphabet Village and the subline of her own
  road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p>

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

CSS

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

HTML

<p>
  Far far away, behind the word mountains, far from the countries Vokalia and
  Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
  right at the coast of the Semantics, a large language ocean. A small river
  named Duden flows by their place and supplies it with the necessary
  regelialia. It is a paradisematic country, in which roasted parts of sentences
  fly into your mouth. Even the all-powerful Pointing has no control about the
  blind texts it is an almost unorthographic life One day however a small line
  of blind text by the name of Lorem Ipsum decided to leave for the far World of
  Grammar. The Big Oxmox advised her not to do so, because there were thousands
  of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind
  Text didn't listen. She packed her seven versalia, put her initial into the
  belt and made herself on the way. When she reached the first hills of the
  Italic Mountains, she had a last view back on the skyline of her hometown
  Bookmarksgrove, the headline of Alphabet Village and the subline of her own
  road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p>

Try it on StackBlitz

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

Note

::first-letter is a CSS pseudo-element selector.

AD

Tip

You can use the CSS clear property to prevent items from wrapping around floating elements.

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:

CSS

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

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

HTML

<div>
  <img
    src="https://images.unsplash.com/photo-1589918099791-34cccabea776?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
    alt="Waterfall"
  />
  Far far away, behind the word mountains, far from the countries Vokalia and
  Consonantia, there live the blind texts.
</div>

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.