Skip to main content

How To Clear Floats (Clearfix)


If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.

Without clearfix#

clearfix

Elements after a floating element will flow around it. Use the "clearfix" hack to fix the problem:

With clearfix#

clearfix

Apply the clearfix css to the parent element to fix this issue.

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