Learn How to Use Float Property in CSS

The float property is used to take an HTML element out of the normal flow of the webpage, and make it float on top of other elements.

Float

Here is an example of using float:

html

<h2>Lorem ipsum dolor sit</h2>
 
<div>Float</div>
 
<p>. . .</p>
<p>. . .</p>
<p>. . .</p>
<p>. . .</p>

css

div {
  float: left;
}

The <div> element is taken out of the normal flow of the webpage, and it is now floating on top of the <p> elements.

In this example, the <div> box floats to the left side. Similarly, you can make it float to the right side like this:

css

div {
  float: right;
  /* . . . */
}

You can also float multiple boxes together like this:

html

<h2>Lorem ipsum dolor sit</h2>
 
<div class="left">Float</div>
<div class="left">Float</div>
<div class="right">Float</div>
 
<p>. . .</p>
<p>. . .</p>
<p>. . .</p>
<p>. . .</p>

css

.left {
  float: left;
}
 
.right {
  float: right;
}
 
div {
  margin: 1em;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: beige;
  padding: 1em;
}
 
p {
  border-radius: 5px;
  background-color: orange;
  padding: 1em;
}

Clearing float

Notice that when the <div> boxes are floating, all subsequent <p> elements will move up to fill their original space.

If you don't want the floated boxes to affect the layout of other elements, you can clear the side effects of float using the clear property.

html

<h2>Lorem ipsum dolor sit</h2>
 
<div class="left">Float</div>
<div class="left">Float</div>
<div class="right">Float</div>
 
<p class="clear">. . .</p>
 
<p>. . .</p>
<p>. . .</p>
<p>. . .</p>

css

.clear {
  clear: left;
}

The clear property takes four values, none (default), left, right, and both.

When set to left, the side effects of left floated boxes will be removed.

When set to right, the side effects of right floated boxes will be removed, and when set to both, the side effects of all floated boxes will be removed.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="/styles.css">
</head>

<body>
  <h2>Lorem ipsum dolor sit</h2>

  <div>Float</div>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic saepe, deleniti
    iusto ducimus inventore, enim veritatis reprehenderit nisi a explicabo
    accusantium fuga illo quisquam officia, voluptatibus illum culpa maxime soluta
    ullam id consequatur voluptas voluptates!
  </p>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic saepe, deleniti
    iusto ducimus inventore, enim veritatis reprehenderit nisi a explicabo
    accusantium fuga illo quisquam officia, voluptatibus illum culpa maxime soluta
    ullam id consequatur voluptas voluptates!
  </p>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic saepe, deleniti
    iusto ducimus inventore, enim veritatis reprehenderit nisi a explicabo
    accusantium fuga illo quisquam officia, voluptatibus illum culpa maxime soluta
    ullam id consequatur voluptas voluptates!
  </p>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic saepe, deleniti
    iusto ducimus inventore, enim veritatis reprehenderit nisi a explicabo
    accusantium fuga illo quisquam officia, voluptatibus illum culpa maxime soluta
    ullam id consequatur voluptas voluptates!
  </p>
</body>

</html>

Open Sandbox

Loading course content...