Jump to content

A Better Way To Clear Floats


grabenair

Recommended Posts

Here is a better way to clear floats then the way we are used to.


/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.cf:before,
.cf:after {
   content:"";
   display:table;
}
.cf:after {
   clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
   zoom:1;
}

 

Just add the .cf class to anything that needs clearing. You can copy and paste all this in your css and done.

Edited by grabenair
Link to comment
Share on other sites

I was trying to think of a good example as to why it is better. I thought of one this morning while drinking my coffee. Remember the scuba site that you made where you was having that float problem, where you said it always worked before. Well this would have fixed that problem if I would have known about it then. If you remember I said that I have had problems with the clear float sometimes and thought it was a html5 thing but was not for sure. Since I have been using this I have had no problems.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...