Try it Editor: The clearfix Hack 2

Edit This Code :

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 3px solid #73AD21;
}

.img1 {
    float: right;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.img2 {
    float: right;
}
</style>
</head>
<body>

<p>In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:</p>

<div><img class="img1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKZQJUNpy6CoYb62NpThHmrO5ZiRqZtfV66cogt5GjWi-fGNJ9NydUrVgq6PYKi8SO1GYD06nVD49TihCYuBVX7JKwaOZ7C50G_0cC_FcmiwDlx2aSKgFyxphgsYhOmA5xve1amD-7o_k-/s320/DWF.png" width="140" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

<p style="clear:right">Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix"><img class="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKZQJUNpy6CoYb62NpThHmrO5ZiRqZtfV66cogt5GjWi-fGNJ9NydUrVgq6PYKi8SO1GYD06nVD49TihCYuBVX7JKwaOZ7C50G_0cC_FcmiwDlx2aSKgFyxphgsYhOmA5xve1amD-7o_k-/s320/DWF.png" width="140" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

</body>
</html>
Result :