Clearfix
2 Jan 2009Una 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+.
de ce nu float pe container?
pentru că o să ai la float-uri de te plictiseşti… şi dacă uiţi un float se duce dracu totul
Sau na, cel puţin eu aşa am păţit de fiecare dată
Mi-a venit randul sa iti spun ca esti cam in urma (vezi data din josul paginii) sau a inceput sa iti placa sa traduci.
Eu de obicei pun un
chiar inainte de ultimul … sau daca nu se poate pune un tot inainte sa inchizi divul principal.sau ceva mai simplu, pui pe container overflow: hidden si clear:both
urmeaza cum se face link la un fisier CSS si ce-i ala un reset. lasa-ne cu d’astea
Nu-ţi place, eşti invitatul meu să nu mai citeşti ce scriu
A se citi cele 2 buline de la ATENTIE
Frate
sunt si eu web developer, http://alexd.adore.ro da totusi, sincer metoda asta e veche de cand lumea, acuma se merge pe float div clear
nu clearfix, aia e bs
faci si tu
si bagi la inceputu CSS-ului o regula de genu #pageWrap .clear ( clear: both; height: 0px; overflow: hidden;)
serios acuma….
ie5?
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ă.
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?
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!
[...] Câteva cuvinte despre clearfix am scris în urmă cu câteva luni aici. [...]
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!