How to apply the Clearfix Hack in CSS ?

The “Clearfix” hack is a technique used in CSS to clear or contain floated elements within a container. It addresses issues where a container does not fully encompass its floated child elements, causing layout problems, especially with collapsing margins.

There are various ways to implement the clearfix hack, but a common method involves adding a pseudo-element with the clear: both property to the container.

For Example

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

Features

• Clearing Floated Elements: The clearfix hack ensures that a container fully wraps around its floated child elements.
• Preventing Collapsing Margins: It helps avoid issues where margins of elements inside the container might collapse, affecting the layout.
• Compatibility: It is widely used and supported across various browsers.