Clearfix pe css

Mulți designeri web au auzit despre clearfix pe CSS. Clearfix - metoda float a anula acțiunea fără a schimba structura in documentul HTML. Această metodă Imposer unele utilizate pe scară foarte largă, așa că am decis să-ți spun despre ea în acest articol.

Să ne uităm la un exemplu:



Textul articolului



site-ul subsol

Toate nimic, dar blocul „Subsol Site-ul“ a fost aceeași la dreapta imaginii, mai degrabă decât sub ea. Care este soluția la această problemă? Este evident că ar trebui să adăugăm doar un alt bloc, float efect anularea:



Textul articolului





site-ul subsol

Acum, totul se încadrează în loc, cu toate acestea, am schimbat structura codul HTML. adăugând un bloc gol ciudat. Deci clearfix evită acest lucru. Nu bloc pentru a adăuga nu este necesară, dar suficient pentru a scrie în CSS-cod după cum urmează:

#article: după conținut: "";
clar: ambele;
afișare: tabel;
>

vă după pseudo-elemente permite să afișeze conținut după ce conținutul unui element. Acest conținut este definit în conținutul de proprietate. Doar acest conținut este elementul de tabel și a anulat efectul float.

Această metodă funcționează în toate browserele moderne, deci este de compatibilitate cross-browser.

Aș adăuga că am folosit pentru a adăuga un bloc cu clar: ambele; în HTML. dar să introducă vă la clearfix în CSS considerăm că este necesar.

Recomanda acest articol unui prieten:

Daca ti-a placut site-ul, link-ul pentru a-l (pe site-ul dvs., pe forum, în contact)

Se pare ca acest lucru:

  • referință BB-cod ​​pentru indexul (de exemplu, puteți pune-l în semnătura):
  • <





    ?php include ($ _SERVER [ "DOCUMENT_ROOT"] "/ vstavki / blokvtext2.html".); ?>