Posted By

travis on 06/29/06


Tagged

css clear float


Versions (?)

Who likes this?

272 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
robnilas
Juroranu


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".

  1. .clearfix
  2. {
  3. display: inline-table;
  4. /* Hides from IE-mac \*/
  5. height: 1%;
  6. display: block;
  7. /* End hide from IE-mac */
  8. }
  9.  
  10. html>body .clearfix
  11. {
  12. height: auto;
  13. }
  14.  
  15. .clearfix:after
  16. {
  17. content: ".";
  18. display: block;
  19. height: 0;
  20. clear: both;
  21. visibility: hidden;
  22. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
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: 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

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: 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: 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!!!!

Posted By: JackPonting on November 26, 2018

Thanks for providing code of clear floats without structural markup and about .clearfix.

Jack, A dissertation help at Quality Dissertation - http://www.qualitydissertation.co.uk

Posted By: WilliamR on December 11, 2018

Appreciate you for taking time and sharing here code of clear floats without structural mark-up and about .clearfix.

William, Assignment writer of Elite Assignment - http://www.eliteassignment.co.uk/

Posted By: WilliamR on December 11, 2018

Appreciate you for taking time and sharing here code of clear floats without structural mark-up and about .clearfix.

William, Assignment writer of Elite Assignment - http://www.eliteassignment.co.uk/

Posted By: james1bondela2 on August 28, 2019

Thanks for sharing Clear floats without structural markup codes with us, it is really helpful, by the way if you are looking for best web development sevice, visit https://www.australiawebdevelopment.com/

Posted By: james1bondela2 on August 28, 2019

Thanks for sharing Clear floats without structural markup codes with us, it is really helpful, by the way if you are looking for best web development sevice, visit https://www.australiawebdevelopment.com

Posted By: davidkingd783 on September 28, 2019

Join Advanced Digital Marketing Course in Gurgaon to construct your career in the most blasting field. APTRON Gurgaon will enable you to pick up expertise in Digital Marketing viewpoints like ON-Page SEO, OFF-Page SEO, Pay Per Click, SMO, Email Marketing, Google Analytics,Content Marketing Google Adwords. APTRON Gurgaon has put in excess of 2000 students in the previous couple of years. Digital Marketing preparing is a Job Oriented Course in Gurgaon.Acknowledge the demands and design broad level of knowledge relationship with the expert and coordinated marketing skills offered by industry experts. We help to develop a superior comprehension and lift your career by means of advanced form of digital marketing certification. For More Info:- https://digital-marketing-course-in-gurgaon.webnode.com/

Posted By: Zenithsez on October 7, 2019

We stumbled over here coming from a different web page and thought I may as well check things out. I like what I see so I am just following you. I look forward to finding out about your web page again. https://uaewebsitedevelopment.com/

Posted By: Zenithsez on October 7, 2019

Here you will find the solution for your coding Journey HTML and HTML5, CSS, JavaScript, and accessibility. Visit Website Development Dubai

Posted By: Zenithsez on October 10, 2019

I just stumbled upon your blog and in accession capital to claim that I acquire actually enjoyed account your blog posts. the water heater tank makes strange pinging and gurgling sounds. If any of those things have happened, visit for solution here [url=https://www.indiapropertyclinic.com/services/water-heater-install-repair]Water Heater Repair[/url]

You need to login to post a comment.