Working with the CSS Float Property and Clearing

In this blog post, we will explore how to work with the float property in CSS and the concept of clearing. The float property has been a crucial topic in the past, used in various hacks and creative ways to implement layouts. However, with the introduction of Flexbox and Grid, the scope of the float property has changed to its original purpose - placing content on one side of the container and making its siblings appear around it.

The float property supports three values: left, right, and none (the default). To demonstrate the usage of the float property, let’s consider a scenario where we have a box containing a paragraph and an image. Below is the HTML code and the corresponding CSS styles:

<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 the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle 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;
}

The visual appearance of the content can be seen in the accompanying image.

By default, the image will appear inline with the text, taking up space within the same line. However, by applying the float: left property to the image and adjusting the padding, we can make the text flow around the image. Similarly, applying the float: right property will make the image float to the right side with appropriate padding.

A floated element is removed from the normal flow of the page, allowing other content to flow around it. This can be observed in the provided examples.

Besides using float for images, it can also be applied to other elements. In the following example, we have replaced 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 the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle 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;
}

The result of this example can also be seen in the corresponding image.

Now let’s explore the concept of clearing. When multiple elements are floated, they are stacked horizontally until there is no more space, after which they start stacking on a new line. To illustrate this, consider the following scenario with three inline images inside a p tag:

To make the images float, we can apply the float: left property to them. This will result in horizontal stacking of the images. However, by adding the clear: left property to the images, we can force them to stack vertically instead.

Note that the clear property allows various values: left to clear left floats, right to clear right floats, both to clear both left and right floats, and none (the default) to disable clearing.

In conclusion, the float property in CSS enables content to be positioned to one side of the container, with other content wrapping around it. Utilizing the clear property, we can control how floated elements interact with each other. The float property has lost its significance in layout design with the emergence of Flexbox and Grid, but understanding its behavior is vital for maintaining and modifying existing codebases.