Basics of CSS Float

3.4. Containing Floats

          As long as we are talking about multiple floats, this is a good time to address another float quirk, and that’s float containment. By default, floats are designed to hang out of the element they are contained in. That’s just fine for allowing text to flow around a floated image, but sometimes this behavior can cause some unwanted behaviors.

          For instance, take the given example below. Clearly, it would be nicer if the border stretched to contain all the content, but the floated image hangs right out the bottom.

          If the floating element is taller than the element containing it, then the floating element steps out of its container. You can fix this issue with the overflow property. paired with an auto value, it stretches the container to big enough for the floating element.

The source:

<div>
<img class= “img1” src=“image.jpg” width="200">Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Sed auctor placerat metus,
sit amet egestas dui rutrum sed. Aliquam eget fringilla metus,
vel pulvinar turpis. Mauris consectetur purus convallis nibh
consectetur, nec mattis nisi euismod.
</div>

<style>
    div {
     border: 4px solid black;
     padding: 15px;
    }
    .img1{
     float: right;
    }
</style>

This will produce the following result:

Without overflow:auto

In the given example, we will fix the overflow problem using the overflow:auto method:

the source

<div class=”clearfix”>
    <img class= “img1” src=“image.jpg” width="200">Lorem ipsum dolor
    sit amet, consectetur adipiscing elit. Sed auctor placerat metus,
    sit amet egestas dui rutrum sed. Aliquam eget fringilla metus,
    vel pulvinar turpis. Mauris consectetur purus convallis nibh
    consectetur, nec mattis nisi euismod.
</div>

<style>
    div {
         border: 4px solid black;
         padding: 15px;
    }
    .img1{
        float: right;
    }
    .clearfix {
        overflow: auto;
    }
</style>

This will produce the following result:

With overflow:auto

The overflow property is not specifically designed for clearing floats. Use it carefully to avoid unwanted results.