CSS Floating and clearing

Floating has been a very important topic in the past.

It was used in lots of hacks and creative usages because it was one of the few ways, along with tables, we could really implement some layouts.

In the past we used to float the sidebar to the left, for example, to show it on the left side of the screen and added some margin to the main content.

Luckily times have changed and today we have Flexbox and Grid to help us with layout, and float has gone back to its original scope: placing content on one side of the container element, and make its siblings show up around it.

What are Attribute Selectors?

Attribute selectors in CSS allow you to select elements based on the presence or value of HTML attributes.

They provide a flexible way to target elements without relying solely on classes or IDs, making your CSS more dynamic and adaptable.

The float property supports 3 values:

left
right
none (the default)

Say we have a box which contains a paragraph with some text, and the paragraph also contains an image.

Here's some code:


<div class="parent">
  <div class="child">
    <div class="box">
      <p>
        This is some random paragraph and an image.
        <img src="https://via.placeholder.com/100x100" /> The image is in 
        middle of the text. The image is in the middle of the text. The im
        in the middle of the text. The image is in the middle of the text.
        image is in the middle of the text. The image is in the middle of 
        text. The image is in the middle of the text. The image is in the 
        of the text. The image is in the middle of the text.   
      </p>
    </div>
  </div>
</div>


.parent {
  background-color :#af47ff;
  padding :30px;
  width :500px;
} 

.child {
  background-color :#ff4797;
  padding :30px;
} 

.box {
  background-color :#f3ff47;
  padding :30px;
  border :2px solid #333;
  border-style :dotted;
  font-family :courier;
  text-align :justify;
  font-size :1rem;
}

and the visual appearance:

As you can see, the normal flow by default considers the image inline, and makes space for it in the line itself. you can confirm that by running the below code to text in in our online text editor.

Example

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      .parent {
        background-color :#af47ff;
        padding :30px;
        width :500px;
      } 
      
      .child {
        background-color :#ff4797;
        padding :30px;
      } 
      
      .box {
        background-color :#f3ff47;
        padding :30px;
        border :2px solid #333;
        border-style :dotted;
        font-family :courier;
        text-align :justify;
        font-size :1rem;
      } 
      
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
    <div class="parent">
    <div class="child">
      <div class="box">
        <p>
          This is some random paragraph and an image.
          <img src="https://via.placeholder.com/100x100" /> The image is in 
          middle of the text. The image is in the middle of the text. The im
          in the middle of the text. The image is in the middle of the text.
          image is in the middle of the text. The image is in the middle of 
          text. The image is in the middle of the text. The image is in the 
          of the text. The image is in the middle of the text.   
        </p>
      </div>
    </div>
  </div>
  </body>
</html>

Try it Yourself »

If we add float: left to the image, and some padding:


img {
  float :left;
  padding : 20px 20px 0px 0px;
}

this is the result:

and this is what we get by applying a float: right, adjusting the padding accordingly:

Example

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      .parent {
        background-color :#af47ff;
        padding :30px;
        width :500px;
      } 
      
      .child {
        background-color :#ff4797;
        padding :30px;
      } 
      
      .box {
        background-color :#f3ff47;
        padding :30px;
        border :2px solid #333;
        border-style :dotted;
        font-family :courier;
        text-align :justify;
        font-size :1rem;
      } 

      img {
        float :left;
        padding : 20px 20px 0px 0px;
      } 
      
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
    <div class="parent">
    <div class="child">
      <div class="box">
        <p>
          This is some random paragraph and an image.
          <img src="https://via.placeholder.com/100x100" /> The image is in 
          middle of the text. The image is in the middle of the text. The im
          in the middle of the text. The image is in the middle of the text.
          image is in the middle of the text. The image is in the middle of 
          text. The image is in the middle of the text. The image is in the 
          of the text. The image is in the middle of the text.   
        </p>
      </div>
    </div>
  </div>
  </body>
</html>

Try it Yourself »

and this is what we get by applying a float: right, adjusting the padding accordingly:


img {
  float :right;
  padding :20px 0px 20px 20px;
}

Example

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      .parent {
        background-color :#af47ff;
        padding :30px;
        width :500px;
      } 
      
      .child {
        background-color :#ff4797;
        padding :30px;
      } 
      
      .box {
        background-color :#f3ff47;
        padding :30px;
        border :2px solid #333;
        border-style :dotted;
        font-family :courier;
        text-align :justify;
        font-size :1rem;
      } 

      img {
        float :right;
        padding : 20px 0px 20px 20px;
      } 
      
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
    <div class="parent">
    <div class="child">
      <div class="box">
        <p>
          This is some random paragraph and an image.
          <img src="https://via.placeholder.com/100x100" /> The image is in 
          middle of the text. The image is in the middle of the text. The im
          in the middle of the text. The image is in the middle of the text.
          image is in the middle of the text. The image is in the middle of 
          text. The image is in the middle of the text. The image is in the 
          of the text. The image is in the middle of the text.   
        </p>
      </div>
    </div>
  </div>
  </body>
</html>

Try it Yourself »

A floated element is removed from the normal flow of the page, and the other content flows around it.

You are not limited to floating images, too. Here we switch the image with a span element:


<div class="parent">
  <div class="child">
    <div class="box">
      <p>
      This is some random paragraph and an image.
      <span>Some text to float </span>The image is in 
        middle of the text. The image is in the middle of the text. The im
        in the middle of the text. The image is in the middle of the text.
        image is in the middle of the text. The image is in the middle of 
        text. The image is in the middle of the text. The image is in the 
        of the text. The image is in the middle of the text.   
      </p>
    </div>
  </div>
</div>


span {
  float :right;
  margin :20px 0px 20px 20px;
  padding :10px;
  border :1px solid black;
}

and this is the result:

Example

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      .parent {
        background-color :#af47ff;
        padding :30px;
        width :500px;
      } 
      
      .child {
        background-color :#ff4797;
        padding :30px;
      } 
      
      .box {
        background-color :#f3ff47;
        padding :30px;
        border :2px solid #333;
        border-style :dotted;
        font-family :courier;
        text-align :justify;
        font-size :1rem;
      } 

      span {
        float :right;
        margin :20px 0px 20px 20px;
        padding :10px;
        border :1px solid black;
      } 
      
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
    <div class="parent">
    <div class="child">
      <div class="box">
        <p>
          This is some random paragraph and an image.
          <span>Some text to float </span> The image is in 
          middle of the text. The image is in the middle of the text. The im
          in the middle of the text. The image is in the middle of the text.
          image is in the middle of the text. The image is in the middle of 
          text. The image is in the middle of the text. The image is in the 
          of the text. The image is in the middle of the text.   
        </p>
      </div>
    </div>
  </div>
  </body>
</html>

Try it Yourself »

Clearing

What happens when you float more than one element?

If when floated they find another floated image, by default they are stacked up one next to the other, horizontally. Until there is no room, and they will start being stacked on a new line.

Say we had 3 inline images inside a p tag:

If we add float: left to those images:


img {
  float :left;
  padding :20px 20px 0px 0px;
}

this is what we'll have:

Example

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      .parent {
        background-color :#af47ff;
        padding :30px;
        width :500px;
      } 
      
      .child {
        background-color :#ff4797;
        padding :30px;
      } 
      
      .box {
        background-color :#f3ff47;
        padding :30px;
        border :2px solid #333;
        border-style :dotted;
        font-family :courier;
        text-align :justify;
        font-size :1rem;
      } 

      img {
        float :left;
        padding : 20px 20px 0px 0px;
      } 
      
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
    <div class="parent">
    <div class="child">
      <div class="box">
        <p>
          This is some random paragraph and an image.
          <img src="https://via.placeholder.com/100x100" /> 
          <img src="https://via.placeholder.com/100x50" />  
          <img src="https://via.placeholder.com/80x100" /> The image is in 
          middle of the text. The image is in the middle of the text. The im
          in the middle of the text. The image is in the middle of the text.
          image is in the middle of the text. The image is in the middle of 
          text. The image is in the middle of the text. The image is in the 
          of the text. The image is in the middle of the text.   
        </p>
      </div>
    </div>
  </div>
  </body>
</html>

Try it Yourself »

if you add clear: left to images, those are going to be stacked vertically rather than horizontally:

Example

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      .parent {
        background-color :#af47ff;
        padding :30px;
        width :500px;
      } 
      
      .child {
        background-color :#ff4797;
        padding :30px;
      } 
      
      .box {
        background-color :#f3ff47;
        padding :30px;
        border :2px solid #333;
        border-style :dotted;
        font-family :courier;
        text-align :justify;
        font-size :1rem;
      } 

      img {
        float :left;
        padding :20px 20px 0px 0px;
        clear :left;
      } 
      
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
    <div class="parent">
    <div class="child">
      <div class="box">
        <p>
          This is some random paragraph and an image.
          <img src="https://via.placeholder.com/100x100" /> 
          <img src="https://via.placeholder.com/100x50" />  
          <img src="https://via.placeholder.com/80x100" /> The image is in 
          middle of the text. The image is in the middle of the text. The im
          in the middle of the text. The image is in the middle of the text.
          image is in the middle of the text. The image is in the middle of 
          text. The image is in the middle of the text. The image is in the 
          of the text. The image is in the middle of the text.   
        </p>
      </div>
    </div>
  </div>
  </body>
</html>

Try it Yourself »

I used the left value for clear . It allows

left to clear left floats
right to clear right floats
both to clear both left and right floats
none (default) disables clearing

Note: Styles applied to links with target="_blank" that don't have rel="noopener noreferrer"