Skip to main content

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​

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.

note

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

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:

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.

Overview​

This article discussed what a CSS float property is. We also used examples to see how it works.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter
Tags:
Last updated on by Oluwatobi Sofela