CSS Clearfix: A clearfix (or clear float) in CSS is for a component to clear or fix the child component, so we don’t need to insert additional markup. The clear float determines the bug, which appears when two or more floated components are loaded after each other.

Assume if we set any sidebar’s position towards the left side of primary content blocks. Though, we can take the component overlap and collapse to each other. Also, we can assume it as if any child component is taller as compared with its parent component and floated; it will get started to overflow outer to its container.

 To overcome the above problem, we can apply overflow: auto; attribute to a containing component.

Let’s take an example to understand it:


In the following example, the image is taller as compared with the containing component and floated, so it overflows outer to its container.

We are making a flo class and overflow: auto; attribute to a corresponding component as follows:

The above mentioned clear float method implements well if we handle the margins and paddings. Although a new practice to clear float is safer for use.


CSS Clearfix

Let’s take another example to understand this concept more clearly:


In the following example, we have applied the clear attribute on ‘both’, i.e. floating components will not permit for both the right and left sides. Also, we apply the display attribute on ‘table’, which creates the component behave like the <table> component of HTML. Then we have to let the content blank. 


CSS Clearfix

CSS Icons  

CSS icons are specified like a symbol or image used inside a computer interface assign to any element. CSS icons are the graphical depiction of any program or file that supports users to recognize the file type quickly.

It is a most comfortable way of inserting icons to any HTML page by using an icon library. It is feasible to format an icon library with the use of CSS. We may customize any icon based on their size, shadow, and color.

Here we are mentioning some of the essential icon libraries like Google icons, Font Awesome icons, and Bootstrap icons that may be used efficiently inside the CSS. We don’t need to download or install these icon libraries.

Description of the above libraries is as follows:

Font Awesome icons

We have to insert a link to use font awesome icons library. This link will be defined in the <head> section, which is mentioned below:

Pin It on Pinterest

Share This