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#


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

With clearfix#


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

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