CSS clear and Clearfix Hack

The clear property specifies what should happen with the element that is NEXT to a floating element. The clear property prevents elements from wrapping around or beside the floated content. This property can have one of the following values: none - Default. Allows elements to float on either side left - The element is pushed below floated elements on its left side right - The element is pushed below floated elements, on its right side both - The element is pushed below floated elements, on both its left and right side inherit - The element inherits the clear value from its parent

Here, clear: left; pushes div2 down below the floating div1, on its left side:

If a floated element is taller than the containing element, it will "overflow" outside of its container. We can then add a clearfix hack to solve this problem:

Example.clearfix::after {

Example explained:.clearfix::after - Targets a pseudo-element that is generated after the content of any element with class="clearfix" content: "" - Ensures the pseudo-element is rendered, even if it has no visible content clear: both - This clears both left and right floats, effectively pushing any following content below the floated elements, and forces the parent container to expand to include them display: table - This creates a new block formatting context, which helps in containing floats

Specifies what should happen with the element that is next to a floating element float Specifies whether an element should float to the left, right, or not at all