Front End Problems

The clearfix hack

Here is a weird, bad thing that can sometimes happen when using floats:

img{
float: right;
}

1

There is a way to fix this, but it’s ugly. It’s called the clearfix hack.

Let’s try adding this new CSS:

2

Now let’s see what happens:

3

This works for modern browsers. If you want to support IE6 you will want to add the following:

4

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s