CSS floats and Clearfix

Hello Guys today i will be discussing clearfix hack in Css which was a very common issue when working with float property.

Well before we start here is a question for you , try to answer it in the comment section

Let's get started...

What is Float?
Floar is used to float the element towards left or right and we can use floats to put two elements side by side without using inline display property.Float right means it will float to the right end of the container and float left will put the element to the left end of the container.

Example

<div >
  <img
    class="left"
        src="./image"
      />
  <p class="right">
        Lorem Ipsum is simply dummy 
        Lorem Ipsum is simply dummy 
        Lorem Ipsum is simply dummy
      </p>
</div>

.left {
      float: left;
      width:500px;
      height:400px;
}
.right {
      float: right;
      width:400px;
}

Output-

• It will put the paragraph at the right end and image at the left end of the container but the container height is 0 as you can see at the top left corner in the image.So what issue it can cause? Let me add another div element after it.

<div >
      <img
        class="left" src="./image"
      />
      <p class="right">
        Lorem Ipsum is simply dummy 
        Lorem Ipsum is simply dummy 
        Lorem Ipsum is simply dummy
      </p>
    </div>
    <div>
      <p>This is another element after float elements</p>
    </div>

Output-

• You can see the new div element with a paragraph overlapses the div with the float elements
• This happend because the div containing the float elements have 0px height so the div element we created after it would be there pretenting there is no element there.
• Float elements inside the div is invisible for the div and the div behaves as empty with 0px height
• How to fix this? , Here we will use our clearfix hack.

Clearfix -

<div class="clearfix">
      <img
        class="left"
        src="./image"
      />
      <p class="right">
        Lorem Ipsum is simply dummy 
        Lorem Ipsum is simply dummy 
        Lorem Ipsum is simply dummy
      </p>
    </div>
    <div>
      <p>This is another element after float elements</p>
    </div>

.clearfix::before,.clearfix::after{
      content:" ";
      display: table;
}
.clearfix::after{
      clear: both;
}
.left {
      float: left;
      width:500px;
      height:400px;
}
.right {
      float: right;
      width:400px;
}

Output -

• Now the div containing the float elements have height equal to the larger element height.
• We have used the before and after to provide the content and then in after we have used "clear" to clear both the floats and the container element got it's height and the newly created div will not collapse on the container div with float elements.

THANK YOU FOR CHECKING THIS POST

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - [e-mail]

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Comments

[ZeeshanAli-0704]

Nice..
But using flex will also solve this purpose.. isn't it?

[Shubham Tiwari]

Yeah flex and grid are the best approach but knowing the old fashioned way also helps in understanding why we use flex and grid and what type of problem flex and grid solves 😁