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

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

Simple Looping Crossfade Image Slideshow

A simple way to give the appearance of a full-screen looping slideshow with crossfading animation.

May 18, 2018

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