Clear Property CSS: Comprehensive Guide

I often get asked if float and clear are still relevant, and the answer is yes. With the modern layout (flex and grid), For the first time, we can use float as its original intention

Introduction to float layout

Let's see an example first

We have an image with a width of 50% and apply display: block

Let's apply the float property and see how it works

.square {
    width: 50%;
    margin-inline-end: 1rem;
    aspect-ratio: 1/1; => force the image width and height to be equal
    object-fit: cover;
    float:left;
}

After applying the float left to the image, the image acts like an inline element and lets the text flow around it. In the good old days, we called it a text-wrap

Let's change float: right and see what happens.

The image changes in the right direction and its text flows into the available space on the left

Circle-shape

By default, everything on a webpage is a box. But it doesn't have to be. CSS Shapes lets us flow content around circles, polygons, masks and other shapes

.square {
    width: 50%;
    margin-inline-end: 1rem;
    aspect-ratio: 1/1;
    object-fit: cover;
    float: left;
    border-radius: 50%;
    shape-outside: circle();
}

Floating with typo

 <style>
    body {
      font-family: "Times New Roman", Times, serif;
      box-sizing: border-box;
    }
    p::first-letter {
      font-size: 4em;
      float: left;
      float: inline-start;
      padding: 5px 5px;
      margin: 5px 5px 5px 0px;
      background-color: cyan;
      text-shadow: 2px 4px 5px white;
    }
  </style>
  <body>
    <p>
      In the quiet of the night, the stars shimmered like diamonds in the
      velvety sky. A gentle breeze rustled the leaves of the ancient oak tree,
      and the world seemed to hold its breath, as if waiting for a secret to be
      revealed. In that moment, under the celestial canopy, everything felt
      infinite and full of possibility
    </p>
  </body>

Control the adjacent sibling

What if we want the text to not flow around the image? we'll use the clear property to help us

.demo-area p {
    clear:right;
}

The text is now under the floating item, making the image act like a block and taking up the whole available space

Clear: both

Finally, we can use both. This is telling the browser, "Hey, I don't care if the item is flowing left or right; just don't let any items float next to me." this is a very common use-case that we often see

Display:flow-root

I forgot to mention the behavior of floating on the element. If you set an HTML element with the float property, the element is considered out of the natural flow of the document. Let's see an example.

In this example, the parent element will take the maximum height of its children. In this case, since the image has the float property, it will take the full height of the paragraph elementthis will make the image overflow.

    <main class="demo-area">
        <img class="square" src="../assets/Beach_bird_LIL_9971.jpg" width="1024" height="683" alt="" >
        <p>With flex and grid in place, I often get asked if float and clear are still relevant. The answer is of course they are! And now, for the first time, we get to use them the way they were intended to be used.</p>
    </main>

This is hardly what developers want, and it causes us trouble. We will use the modern technique in CSS to solve it ( display:flow-root )

.demo-area {
    margin: 0 auto;
    max-width: 70ch;
    border:1em solid black;
    display:flow-root;
}

What display:flow-root does is make the parent component the block-level box, find the bottom of the edge, which is the lowest point in the layout and place the root of the box there ( in this case), our floating picture element

Conclusion

TL;DR: Float and clear properties are still relevant in modern CSS layouts. Float allows images to act as inline elements, enabling text-wrap around them, while clear helps control text flow around floating elements. The display: flow-root property can be used to prevent unwanted overflowing by establishing a new block-level formatting context for the parent element.

Understanding the Float Property in CSS

Demystifying the Float Property: A Comprehensive Guide to CSS Layout

Table of contents