Clearfix

Una din problemele ce apar în cazul în care faci un site fără tabele (adică semantic) apare în momentul când ai multe elemente cu float. În cazul în care ai un box cu două div-uri:

left div
right div
.left {
	width:200px;
	float:left
}
.right {
	margin-left:200px
}

Iar div-ul cu float are mai mult conținut și sub .box ai alt conținut, sunt șanse destul de mari să iasă ceva urât. Același lucru se întâmplă și dacă vrei să folosești un background sau un border la .box.

Care este soluția?

Ta da da daaaa: clearfix!

.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
* html .clearfix {height:1px;}

Cum se folosește?

Se adaugă clasa clearfix div-ului ce conține elementele cu float.

left div
right div

Atenție!

  • NU se aplică elementelor cu float ci părintelui ce conține aceste elemente!
  • NU se folosește la footere (sau la ultimul element din pagină) deoarece apare un spațiu nedorit la sfârșitul paginii. În cazul în care footer-ul trebuie să fie „lipit” de partea de jos, ar putea provoca dureri de cap

Codul funcționează (testat) în: IE6/7, Firefox 2/3, Safari 3, Opera 8+.

14 Comentarii

Staicu Ionuț Bogdan a scris

Da frate… Așa sunt eu, mai în urmă cu tehnologia…
Oricum, nu prea am înțeles ce trebuie să fac si cum să fac. Cred că n-ai pus codul cum trebuie.
Și da, serios. N-am susținut că ar fi o metodă nouă, ci doar că e utilă.

acuma se merge pe float div clear

nu știam că până și clear-ul trebuie să urmeze un trend. Ce o să faci peste doi ani, când se va schimba trendul?

nicolas florth a scris

Salut! am si eu o mare rugaminte la voi. Nu sunt prea experimentat in webdesigne dar am 3 luni de cand invat intens…si intamplator am fost invitat sa fac un site…o sa va rog sa va uitati putin peste el si sa ma ajutati, pt ca azi am descoperit ca e o problema mare( pe ie 6) pe care eu nu il am instalat…am lucrat si verificat doar pe ie7 si firefox. problema e urmatoarea…meniul…de fapt sunt doua si amandoua au probleme pe toate paginile…linkul e http://nicolasflorth.ziuamea.info -inca nu e gata….dar e foarte important sa fie. meniul l am facut de tip sprite( si mi a luat 2 zile sa il pozitionez si sa functioneze cat de cat bine)..si tot degeaba pt ie6. o sa vedeti probabil si unele greseli in css la meniuri. unul dintre ele care are 2 butoane nici nu am stiut cum sa l pozitionez inline..si cat am caaaautaaat!!!!!!!!va rog sa ma ajutati si sa-mi spuneti unde am gresit. Cu respect pt toti!

Cristian a scris

Asa fac romanii: in loc sa zica Multumesc fac toti pe desteptii. Mi-e greata!
Ar trebui sa nu le raspunzi nemultumitilor. Cei care au avut nevoie de informatie au citit-o si au revenit la treaba.

Scrie in continuare, sigur ajuta multa lume. Si, daca e sa comentez si eu ceva, cred ca ar ajuta daca ai pune si exemple grafice. E greu sa iti imaginezi css output :)

Noroc!

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter
windows apple dropbox facebook twitter