CSS Float and Clear

In this chapter, you will learn about the CSS Float and Clear properties. These properties were commonly used to create layouts before Flexbox and Grid became popular. They are still useful to understand, especially when working with older websites or when you want content to flow around an image. Let’s understand how CSS Float and Clear work step by step.

What is CSS Float property?

The float property moves an element to the left or right side of its container. The content that comes after it can flow around the floated element. The most commonly used values are:

• left
• right
• none

1. Float: Left

The float: left property moves an element to the left side.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Float Left</title>

  <style>
    .box {
      float: left;
      width: 150px;
      height: 100px;
      background-color: lightblue;
      border: 2px solid blue;
      margin-right: 15px;
    }
  </style>
</head>

<body>

  <div class="box">Float Left</div>

  <p>
    This text appears next to the box because the box is floated to
    the left side. The text continues around the floated element.
  </p>

</body>
</html>

The box moves to the left, and the paragraph text flows beside it.

2. Float: Right

The float: right property moves an element to the right side.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Float Right</title>

  <style>
    .box {
      float: right;
      width: 150px;
      height: 100px;
      background-color: lightgreen;
      border: 2px solid green;
      margin-left: 15px;
    }
  </style>
</head>

<body>

  <div class="box">Float Right</div>

  <p>
    This text appears beside the box because the box is floated to
    the right side. The text flows around the floated element.
  </p>

</body>
</html>

The box moves to the right, while the text appears beside it.

3. Float: None

The value none is the default value.

.box {
  float: none;
}

This means the element will stay in its normal position. Most elements do not need this property unless you want to remove a previously applied float.

Floating Multiple Elements

You can also float multiple elements next to each other.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Multiple Floated Elements</title>

  <style>
    .box {
      float: left;
      width: 120px;
      height: 100px;
      background-color: lightblue;
      border: 2px solid blue;
      margin: 10px;
      padding: 10px;
    }
  </style>
</head>

<body>

  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>

</body>
</html>

The boxes will try to appear next to each other because each box is floated to the left. If there is not enough space, the next box will move to a new line.

What is CSS Clear property?

The clear property is used to control how an element behaves next to floated elements. For example:

p {
  clear: both;
}

This prevents the paragraph from appearing beside a floated element. The commonly used values are:

• left
• right
• both

Using clear: left

The clear: left value prevents an element from appearing next to a left-floated element.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Clear Left</title>

  <style>
    .box {
      float: left;
      width: 150px;
      height: 100px;
      background-color: lightblue;
      border: 2px solid blue;
    }

    .text {
      clear: left;
    }
  </style>
</head>

<body>

  <div class="box">Float Left</div>

  <p class="text">
    This paragraph starts below the floated box.
  </p>

</body>
</html>

Because of clear: left, the paragraph moves below the box instead of appearing beside it.

Using clear: both

The clear: both value prevents an element from appearing next to either a left-floated or right-floated element.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Clear Both</title>

  <style>
    .left-box {
      float: left;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }

    .right-box {
      float: right;
      width: 100px;
      height: 100px;
      background-color: lightgreen;
    }

    .text {
      clear: both;
    }
  </style>
</head>

<body>

  <div class="left-box">Left</div>

  <div class="right-box">Right</div>

  <p class="text">
    This paragraph appears below both floated boxes.
  </p>

</body>
</html>

The paragraph starts below both boxes because of:

clear: both;

Should You Use Float for Layouts?

In older websites, float was often used to create page layouts. Today, CSS provides better layout tools such as:

• Flexbox
• CSS Grid

These are easier to use for creating modern layouts. However, float is still useful when you want text to flow around an element, such as an image.

Quick Recap

• The float property moves an element to the left or right.
• float: left moves an element to the left.
• float: right moves an element to the right.
• float: none keeps an element in its normal position.
• The clear property controls how elements behave around floated elements.
• clear: left clears left-floated elements.
• clear: right clears right-floated elements.
• clear: both clears both left and right floats.
• Flexbox and Grid are commonly used for modern layouts.

Mini Quiz

0%

CSS - QUIZ 18

1 / 5

Q1. What does float: left do to an element?

Moves it to the left

Moves it to the right

Moves it below other elements

Hides the element

2 / 5

Q2. Which float value keeps an element in its normal position?

right

left

both

none

3 / 5

Q3. What is the main purpose of the clear property?

To change an element's width

To move an element to the right

To hide floated elements

To control behavior next to floated elements

4 / 5

Q4. What does clear: left do?

Prevents appearing beside a left-floated element

Prevents appearing beside a right-floated element

Moves an element to the left

Removes the float property

5 / 5

Q5. Which value prevents an element from appearing beside both left- and right-floated elements?

right

left

both

none

Your score is

The average score is 0%

0%

By Wordpress Quiz plugin

<!DOCTYPE html>
<html>
<head>
  <title>Travel Guide Card</title>

  <style>
    .travel-card {
      width: 700px;
      margin: 30px auto;
      padding: 20px;
      border: 2px solid #333;
    }

    .destination {
      float: left;
      width: 180px;
      height: 130px;
      background-color: lightblue;
      border: 2px solid blue;
      margin-right: 20px;
      text-align: center;
      padding-top: 20px;
    }

    .highlight {
      float: right;
      width: 160px;
      height: 110px;
      background-color: lightgreen;
      border: 2px solid green;
      margin-left: 20px;
      text-align: center;
      padding-top: 20px;
    }

    .travel-tips {
      clear: both;
      margin-top: 30px;
      background-color: lightyellow;
      padding: 15px;
      border: 2px solid orange;
    }
  </style>
</head>

<body>

  <div class="travel-card">

    <h1>Explore Manali</h1>

    <div class="destination">
      Manali<br>
      Mountain View
    </div>

    <div class="highlight">
      Best Time<br>
      March - June
    </div>

    <p>
      Manali is a beautiful destination surrounded by mountains, forests,
      rivers, and scenic valleys. It is a popular choice for travelers who
      enjoy nature, adventure, and peaceful surroundings. Visitors can explore
      local markets, enjoy mountain views, and spend time discovering nearby
      attractions.
    </p>

    <p>
      The destination offers activities for different types of travelers.
      Some visitors prefer relaxing in the hills, while others enjoy outdoor
      adventures and sightseeing. There are also many local places where
      travelers can experience the culture and food of the region.
    </p>

    <div class="travel-tips">
      <h2>Travel Tips</h2>
      <p>
        Carry comfortable clothes, plan your sightseeing in advance, and
        keep some extra time to explore places around the main destination.
      </p>
    </div>

  </div>

</body>
</html>

Frequently Asked Questions (FAQs)

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Nidhi Srivastav