clearfix Archives - Ebhor.com

Bootstrap Clearfix

January 26, 2023January 24, 2023 by manish

Bootstrap float utility is very helpful in positioning the components properly on the web-page. But there are is an issue in this approach that needs to be addressed. Check out the code below to know about the same:

<html>
   <head>
      <style>
         div {
         border: 3px solid #4CAF50;
         padding: 5px;
         }
         .img1 {
         float: right;
         }
      </style>
   </head>
   <body>
      <p>Check this code in you browser and you will find a problem with the floats.</p>
      <div>
         <img class="img1" src="image.jpg" alt="example" width="170" height="170">
         Sample text in the div. This is the second line. The line 3 comes next. And then comes the final line h
      </div>
   </body>
</html>

<html>

<head>

<style>

div {

border: 3px solid #4CAF50;

padding: 5px;

}

.img1 {

float: right;

}

</style>

</head>

<body>

<p>Check this code in you browser and you will find a problem with the floats.</p>

<div>

Sample text in the div. This is the second line. The line 3 comes next. And then comes the final line h

</div>

</body>

</html>

If you load this code on a browser, you can observer following points: A <div> is … Read more