Fixing Of Page Layout Problems

In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:

Without Clearfix

first image Learn and understand the clear fix concept with the help of an examples.

Add the clear fix hack to the containing element, to fix this problem:

With Clearfix

Second image In this section, clear fix concept is used to resolve the web page layout problems.

Modern CSS Hack Technique

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