CSS clearfix Class 5 Minute Explanation

CSS clearfix Class Explained

Welcome to the CSS Clearfix Class explanation & example tutorial. In this short article, our main focus will be BOOTSTRAP’S clearfix class. When you hear CSS clearfix class what does it mean? how to do it? what does it do?
These are just some of the questions I plan on answering. I promise that after this article you will understand the CSS clearfix class and know how to use it.

CSS clearfix Class

In short, A clearfix is a way for an element to automatically clear its floating structure. that is done in order to save you from adding additional markup. It’s generally used in a “floated” layouts. where elements are floated to be stacked side by side. This allows you to keep positioning elements without them being stacked left or right depending to the last elements float side).
The clearfix is a way to help us with container problems for floated elements. In addition to that, it allows us to continue to place layouts and elements in a nice fashion. Furthermore, it creates order without creating a broken layout.
clearfix is just Bootstraps class for this fix in CSS. Allowing us to implement it faster and easier. To read more on Bootstraps clearfix class on its official documentation page, click HERE.
Let us have an example to get a glimpse on how it looks like:

<div class="clearfix">...</div>

The Styles behind it:

.clearfix {
    display: block;
    content: "";
    clear: both;

That’s all there is to the class .clearfix. I will provide a small explanation for implementation.
As mentioned above the class clearfix is a part of bootstrap’s CSS library. to use it we need to assign the class .clearfix to the desired HTML element. As shown in the example above on the DIV.
In short on CSS’s CLEAR property, The clear property specifies on which sides of an element floating elements are not allowed to float. For example, if we cleared an element’s left side we will be able to place blocks on its left side but not the right. Its important to remember, when building floated layouts don’t forget to clear elements!

Summary of things

Hope you understand the meaning of CSS clearfix class. the best way to grasp this is to practice with it, A LOT. As I mentioned above don’t get turned around in circles, don’t forget to clear needed elements in order to maintain the order and achieve your goals in the design.
Finally, I would like to point to the fact that floated layouts are becoming a bit old-fashioned. devs are taking the Flex-Box approach in regards to layout design. Nevertheless, it will take a significant amount of time until floated layouts will be gone from our world.
 More Code Snippets ->

Leave a Reply

Your email address will not be published. Required fields are marked *