Posted By

travis on 06/29/06

Tagged

Versions (?)

Who likes this?

270 people have marked this snippet as a favorite

travis
bobbysmith007
xhtmled
luxuryluke
jamesmcoats
pagetoscreen
designerd
alvaroisorna
talaris
splorp
cochambre
postNuKe
fsorbello
sendoa
panatlantica
marc0047
kgosser
nicolaspar
benpjohnson
damarev
enochrisen
rengber
zensir
oronm
vanne
ttscoff
dividespace
mh
gronas
benvallack
block
basicmagic
Sahoglu
koncept
tavo
icarus
nankoweap
mblarsen
SpinZ
theevilcube
Mikker
hollowmyth
manub
Buerogeschwister
fael
rich13
asimovi
SamuelMiller
aziz
gtalmes
udayrayala
noah
marteki
gasface
Leech
Winkyboy
sp1r1t
willgarrison
tome2k
sangrio
n00ge
johnself
avioli
stphnclysmth
sosof
wbowers
balinuxster
dkypuros
gbot
cczona
jatkins
chill3d
wired
koorb
nilsr
sleggat
stylz
unravelme1
digiloper
heinz1959
pablodgavilan
LeeRJohnson
loopdream
jonrandy
esquareda
jfherring
dvdrtrgn
titox
poGDI
superdeluxesam
jero
andyweb
novatvstdios
crisb
ascarion
ilumin
LostCore
justinscheetz
VaiT
Hilyin
rubenrails
tobiasmay
dzone
yuindustries
hanzwurzt
brother_maynard
mori
thinkcirca
elbuenob
ntulip
enajenkins
Bluewall
Boulder
owais
geothen
dardanmex
nreliu
gpenston
shali
bakin9
nirva
ikimozu
delarge
l1r
aceweb
endorfin
hamiltonmascioli
fragmentist
jmacgr
darkapple
nb109
deanburge
umang_nine
tmbrenneke
matpolster
marcustrapp
ozenyx
markoburns
obsessivejosh
jozefsevcik
helloworlder
acosonic
brianyang
GrillPhil
visualpropaganda
infinidad
isdereks
marvin_speakman
zoblue
scottyu
RagnarR
loric
huynguye
sultano
jay3917
jeeremie
Pingpongbal
jaff
aahmed753
ruhanirabin
debagel
bigredjoe
xpoint
YA
webtronix
portalpie
scitrenbaumgmailcom
eivind
maxpensyl
jmiller
EkTrOn
benrudolph
babel2675
tariel
LyndseyPearce
orangemittoo
MikeyLikesIt
djmicahelb
ahsanhabib
beneberle
rjene
qmmr
d55beck
digitalifer
nerdsane
mdavidwalker
sulco
hussainweb
fordsbasement
giuliom
Swift-R
visualife
savantstyles
nextneed
pchengsf
koteus
ljayz
naeemnur
fauverism
corangar
gnitter
melik
widgetyegg
robknight
seanpowell
bobbym245
azipagan
lunacye
cromozooom
zanetaylor
Al-Kemist
eckbert
geoffreydv
gisu
ddtfish
MadRukus
brycej
petrykowski
nishantpatilyahoocom
kubaitis
tspitzr
aegony
asifjavedall
dwenaus
mrplantain
michellebracken
cchitsiang
intothelight
qubestream
samkamerer
metthyn
nahid
TraceyM
luckystokes
julianrhyswilliams
stavros
kenpar
germanny
wearefreya
rizm
albertomori
rajashri78
STaRDoGG
digitalink
espig
jumichot
dubogii
merritt212
guo3823538
roroland
nerdfiles
ArnoldDC
dondalos
redconservatory
tmh27
vrob
robotici
mmcachran
robfahy
Lukerville1988
ryanfiorini
bustel2
lashon
symsec
astroShark
vggallego
erikgeerling
ekarakas
3polars
atulkransingh

Clear floats without structural markup

/ Published in: CSS

".clearfix" is the container that holds all of your floated elements. Works in all browsers that support "float" and "clear".

Expand | Embed | Plain Text

.clearfix
{
	display: inline-table;
/* Hides from IE-mac \*/
	height: 1%;
	display: block;
/* End hide from IE-mac */
}
 
html>body .clearfix
{
	height: auto;
}
 
.clearfix:after
{
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

Report this snippet Tweet

Comments

Subscribe to comments

Posted By: jatkins on March 6, 2008

Aw, I see a hack :(

Posted By: jatkins on March 6, 2008

Although, it's not a real problem, as IE-Mac isn't supported anymore (I think?). No issue.

Posted By: jadedbat on December 3, 2008

Love it.

Posted By: AlexWolfe on December 29, 2008

I don't believe IE6 supports the psuedo class :after with the insertion of "content: '.' " Please check this in IE6 before using it.

Posted By: ilumin on January 6, 2009

it WORK on IE6 thx alot.

Posted By: deepdown on January 28, 2009

just use an overflow and 'hack' the height for IE:

.clearfix {overflow: auto; _height: 1%;}

Posted By: jstnjns on February 13, 2009

I would actually recommend not using any hacks, as clearing can be totally achieved without any special classes OR hacks.

divtryingto_expand {

height: auto; overflow: auto; }

There are a few places where this method doesn't work: 1. when a child within this parent div is absolutely positioned outside of the border of the parent div 2. if a child within this parent div has a floated child that is not being cleared, and causes the child of the child to extend outside of the parent div

Hope this helps!

Posted By: jaspertandy on April 13, 2009

if you're just trying to clear floats, I define the following:

/it's normally a good idea to wrap two floats, as semantically you could argue they're associated anyway/ .wrap { overflow:hidden; width: 100%; /important to define a width - the simple .class allows for easy overwrite/ } simple.

Posted By: Triconium on April 22, 2009

While this does work in some circumstances, there are some instances involving more complex markup that it will not work with. Due to these inconsistencies, I prefer to stick with the tried-and-true method of using clear divs.

Neat snippet, though.

Posted By: frujo on April 29, 2009

This code was clearly explained in "CSS Mastery" book by Andy Budd and Cameron Moll.

Posted By: billh on August 7, 2009

That is the old clearfix. Here is the new one. Sorry, you'll have to google it for more information as I don't remember where I came across it. It fixes a bug with the period and also adds support for FF3.

/* This needs to be first because FF3 is now supporting this */ .clearfix {display: inline-block;}



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

/* Hides from IE-mac */ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */

Posted By: billh on August 7, 2009

ugh sorry about the formatting, let me try again.

/* This needs to be first because FF3 is now supporting this */
.clearfix {display: inline-block;}

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

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Posted By: bucabay on September 3, 2009

nice...

Posted By: smoothdzion on November 4, 2009

I've become addicted to the inline-block way of laying things out lately. Then you don't have to worry about clearing anything. Just add the following style with a width assigned to it and make sure all your div html is inline and it works great. If you have extra space your divs/elements are coded inline.

Not Inline

Inline

CSS Code

element {
  display:inline-block;
  *display:inline;
  zoom:1;
  _height:1%;
  vertical-align:top;
}

Posted By: smoothdzion on November 4, 2009

Not Inline

Inline

CSS Code

element {
  display:inline-block;
  *display:inline;
  zoom:1;
  _height:1%;
  vertical-align:top;
}

Posted By: buzzknow on September 17, 2010

How about clear:both ?

Posted By: kristapsancans on February 18, 2011

How about adding to the floated element wrapper

overflow:hidden; width:100%

it triggers hasLayout and clears floats.

Posted By: rolfen on March 30, 2011

Remember, in newer browsers (IE8+, FF, Chrome...) you can use inline-block too for grids, galleries, flowing boxes etc. For IE7 there is a hack to use them. Using inline blocks, I believe, can remove the need for structural markup for clearing floats in most if not all cases.

Posted By: amandalaine on September 13, 2011

The right column says "257 people have marked this snippet as a favorite". How do I mark a snippet as a favorite?!?! I have been trying to do this... for months. I don't see the button anywhere on the interface. Thank you. I'm really looking forward to an answer from someone. Thank you in advance!!!!

Comment:

You need to login to post a comment.