Folosind proprietatea floating CSS pentru a proiecta layout-uri de pagini web
Proprietatea CSS este o proprietate foarte importantă pentru aspect. Acesta vă permite să poziționați desenele dvs. de pagină web exact așa cum doriți să le afișeze - dar pentru a le utiliza, trebuie să înțelegeți cum funcționează.
Într-o foaie de stil, proprietatea floating CSS arată astfel:
. dreapta {float: right; }
Acest lucru îi spune browser-ului că tot ce are clasa "dreapta" ar trebui să plutească la dreapta.
V-ați aloca astfel:
class = "right" />
Ce puteți să plutiți cu proprietatea Floating CSS?
Nu puteți să plutiți fiecare element pe o pagină web. Puteți să plutiți numai elemente de nivel bloc . Acestea sunt elementele care ocupă un bloc de spațiu pe pagină, cum ar fi imagini (), paragrafe (), diviziuni () și liste ().
Alte elemente care afectează textul, dar nu creează o casetă pe pagină sunt numite elemente inline și nu pot fi flotate. Acestea sunt elemente cum ar fi span (), pauze linii (), accent puternic (), sau cursive ().
Unde plutesc?
Puteți să plutiți elemente în dreapta sau în stânga. Orice element care urmează elementului plutit va curge în jurul elementului plutitor de cealaltă parte.
De exemplu, dacă plutesc o imagine în stânga, orice text sau alte elemente care o vor urma vor curge în jurul ei spre dreapta. Și dacă voi pluti o imagine în dreapta, orice text sau alte elemente ce urmează vor curge în jurul ei în stânga. O imagine care este plasată într-un bloc de text fără un stil float aplicat acesteia va afișa, totuși, browserul este setat să afișeze imagini.
Aceasta este de obicei cu prima linie de text urmată afișată în partea de jos a imaginii.
Cât de departe vor pluti?
Un element care a fost plutind se va deplasa cat mai departe la stanga sau la dreapta elementului container. Acest lucru are ca rezultat mai multe situații diferite, în funcție de modul în care codul dvs. este scris.
Pentru aceste exemple, voi pluti un element DIV mic în stânga:
- Dacă elementul plutitor nu are o lățime predefinită, acesta va ocupa cât mai mult spațiu orizontal ca cel necesar și disponibil, indiferent de flotor. Notă: unele browsere încearcă să așeze elemente lângă elementele flotate atunci când lățimea nu este definită - oferind, de obicei, elementului ne-plutit doar o cantitate mică de spațiu. Deci, ar trebui să definiți întotdeauna o lățime pe elementele plutitoare.
- Dacă elementul container este elementul HTML, DIV flotat va sta pe marginea din stânga a paginii.
- Dacă elementul container este conținut de altceva, DIV plutitor va sta pe marginea din stânga a recipientului.
- Puteți cuibui elemente plutitoare, iar acest lucru poate duce la un plutitor care se termină într-un loc surprinzător. De exemplu, acest float este un DIV stânga plutitor în interiorul unei DIV flotate dreapta.
- Elementele plutitoare se vor așeza una lângă cealaltă în cazul în care există loc în container. De exemplu, acest container are trei elemente DIV cu lățimea de 100 pixeli flotate într-un container cu lățimea de 400 de pixeli.
Puteți utiliza chiar flotoare pentru a crea o dispunere de galerie foto. Puneți fiecare miniatură (funcționează cel mai bine atunci când acestea sunt de aceeași mărime) într-un DIV cu legenda și flotați elementele DIV din container.
Indiferent cât de largă este fereastra browserului, miniaturile se vor alinia uniform.
Oprirea plutitorului
Odată ce știți cum să obțineți un element care să plutească, este important să știți cum să opriți flotorul. Opriți float cu proprietatea de ștergere CSS. Puteți șterge plutitoarele din stânga, plutitoarele drepte sau ambele:
clar: stânga;
clar: drept;
clar: ambele;
Orice element pe care ați setat proprietatea clară pentru va apărea sub un element care este flotat în acea direcție. De exemplu, în acest exemplu, primele două paragrafe ale textului nu sunt șterse, dar al treilea este.
Redați cu valoarea clară a diferitelor elemente din documentele dvs. pentru a obține efecte diferite de aspect.
Una dintre cele mai interesante aspecte plutitoare este o serie de imagini în jos pe coloana din dreapta sau stânga de lângă paragrafe de text. Chiar dacă textul nu este suficient de lung pentru a parcurge imaginea, puteți utiliza funcția de ștergere a tuturor imaginilor pentru a vă asigura că acestea apar în coloană și nu lângă imaginea anterioară.
HTML (repetați acest paragraf):
Duis aute irure dolor sed do eiusmod temporal incididunt în reprehenderit în voluptate. Cupidate non proident, lucrați și mai mult magna aliqua.
CSS (pentru a pluti la imaginile din stânga):
img.float {float: left;
clar: la stânga;
margin: 5px;
}
Și în dreapta:
img.float {float: right;
clar: dreapta;
margin: 5px;
}
Folosind Plutitoare pentru Layout
Odată ce înțelegeți cum funcționează proprietatea float, puteți să o utilizați pentru a vă stabili paginile web. Aceștia sunt pașii pe care îi iau pentru a crea o pagină web plutitoare:
- Proiectați aspectul (pe hârtie sau într-un instrument grafic sau în capul meu).
- Determinați unde vor fi diviziile de pagini.
- Determinați lățimile diferitelor containere și elementele din ele.
- Float totul. Chiar și cel mai exterior element container este plutit la stânga, astfel încât să știu unde va fi în raport cu portul de vizualizare a browserului.
Atâta timp cât cunoașteți lățimile (procente fine) ale secțiunilor de aspect, puteți utiliza proprietatea float pentru a le pune în locul în care aparțin. Și chestia frumoasă este că nu trebuie să vă faceți griji atât de mult cu privire la modelul casetei fiind diferit pentru Internet Explorer sau Firefox.