Clearfix CSS hack – Floating Elements and Problems with Parents Height

Ever run into the problem where you floated children elements no longer fit in their parent container? This happens because floating elements means that their parents should no longer care about the heights of the floated children. To solve this, you can create the following class in your CSS, and add the class to your HTML were appropriate:

.clearfix:after {
content: " "; /* creates an empty element after the class */
display: table; /* (tells the element to show up and take up the full height */
clear: both; /* clears the float */

Leave a Reply

%d bloggers like this: