Home

CSS clearfix

In working with CSS you're going to come across a class called "clearfix" at some point.

In working with CSS you're going to come across a class called "clearfix" at some point.

When you float an element, it is subsequently removed from the flow of elements on the page. If you've played around with floats, you know exactly what I'm talking about; and it's pretty frustrating.

There are several formulas for fixing this - for clearing elements following the floated element. The best one I've found is over at webtoolkit. You would insert this code into your stylesheet:

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

Then you just add the clearfix class to the appropriate elements. And if you need to know how to assign multiple classes to an element, check this out.

Let's Connect

Keep Reading

Full-Size, Looping Background Video with YouTube Video

It seems looping background videos are the new thing. But you don't have to serve up the video on your server. Let's use a YouTube video to accomplish it!

Feb 12, 2016

Styling Placeholders for Select Fields

A (limited) CSS-only approach for styling placeholders, along with a way to work around the limitations with a custom JS-based solution.

Jun 16, 2022

Learning How to Code a Website for Beginners

Learning to jump into web development can be overwhelming. Let's look at a couple ways in which you can get started.

Nov 20, 2012