Pluterele CSS au fost explicate în 5 întrebări

CSS "plutitoare" (elemente plutitoare) sunt simple de utilizat, dar odată folosite, efectul pe care îl are asupra elementelor din jurul lor uneori devine imprevizibil. Dacă ați întâmpinat vreodată problemele legate de dispariția elementelor din apropiere sau de flotoare care se aruncă ca un deget mare, nu vă mai faceți griji.

Acest post acoperă cinci întrebări de bază care vă vor ajuta să deveniți un expert la elemente plutitoare.

1. Elementele care nu plutesc?
2. Ce se întâmplă cu un element atunci când acesta plutește?
3. Ce se întâmplă cu frații "plutitori"?
4. Ce se întâmplă cu un părinte al unui "Float"?
5. Cum clarificați "Plăcile"?

Pentru cititorii care adaugă abordarea TL la viață, există un rezumat aproape de sfârșitul postului.

1. Ce elemente nu plutesc?

Un absolut sau element poziționat fix nu va pluti. Deci, data viitoare când întâlniți un flotor care nu funcționează, verificați dacă acesta este în Poziția: absolută sau Poziția: fix și să aplice modificările în consecință.

2. Ce se întâmplă cu un element atunci când acesta plutește?

Atunci când un element este etichetat "float", acesta rulează fie spre stânga, fie spre dreapta, până la acesta lovește peretele elementului său de container. În mod alternativ, va funcționa până la ora actuală lovește un alt element plutitor care a lovit deja același perete. Ei vor continua să se alăture unul lângă altul până când spațiul va ieși, iar noile intrări vor fi mutate în jos.

Elemente plutitoare, de asemenea nu va trece deasupra elementelor inainte de aceasta în cod, ceva ce trebuie luat în considerare înainte de a codifica a “Pluti” după un element de partea pe care doriți să o plutiți.

Iată două alte lucruri care se întâmplă cu un element plutitor, în funcție de ce tip de element este menținut plutitor:

(1) Un element inline se va transforma într-un element la nivel de bloc când a plutit.

Te-ai intrebat de ce deodata poti sa incadrezi inaltimea si latimea unui plutitor deschidere? Acest lucru se datorează faptului că toate elementele când plutesc vor obține valoarea bloc pentru ei afişa atribut (inline-tabel va primi masa) făcându-le să blocheze elemente de nivel.

(2) Un element bloc cu lățimea nespecificată se va micșora pentru a se potrivi conținutului său atunci când este flotat.

De obicei, când nu specificați lățimea unui element de bloc, lățimea sa este cea implicită 100%. Dar când a plutit, nu mai este cazul; caseta elementului de blocare se va micșora până când conținutul său rămâne vizibil.

3. Ce se întâmplă cu "Prietenii" "plutelor"?

Când decideți să plutiți un element printre multe elemente, nu vă faceți griji cu privire la modul în care se va comporta, comportamentul său va fi previzibil și se va deplasa la stânga sau la dreapta. Ceea ce ar trebui să te gândești este modul în care frații se vor comporta.

"Floatele" au cei mai buni și mai ascultători frați mai târziu din întreaga lume. Ei vor face tot ce le stă în putere pentru a găzdui un element plutitor.

text și elemente inline va pur și simplu face loc pentru "Floats" și va înconjura "Float" când este în poziție.

elemente de bloc va merge un pas mai departe și va se înfășoară în jurul unui "plutitor" generos, chiar daca inseamna sa-si scoata propriile elemente de copil pentru a face spatiu pentru "Float".

Să verificăm acest lucru într-un experiment. Mai jos este o cutie albastra si dupa aceasta este o cutie rosie de aceeasi dimensiune cu cateva elemente copil.

Acum, să plutim cutia albastră și să vedem ce se întâmplă cu cutia roșie și cu copiii ei.

Totul va fi bine odată ce caseta roșie se oprește să îmbrățișeze cutia albastră și pentru asta poți folosi overflow: ascuns.

Când adăugați overflow: ascuns la un element care a înfășurat un flotor, va înceta să o facă. Vedeți mai jos cum se comportă cutia roșie overflow: ascuns.

4. Ce se întâmplă cu un părinte al unui "Float"?

Părinții nu le pasă prea mult de copiii lor "Float", cu excepția faptului că nu ar trebui să iasă din limitele lor stânga sau dreaptă.

În mod obișnuit, un element bloc de înălțime nespecificată își mărește înălțimea pentru a se adapta la elementele copilului său, dar acest lucru nu este valabil pentru copiii "Float". Dacă mărimea lui "Float" crește, părintele nu va crește în mod corespunzător înălțimea acestuia. Acest lucru poate fi rezolvat din nou prin utilizarea overflow: ascuns în părinte.

5. Cum să eliminați "Plăcile"?

Am menționat deja utilizarea overflow: ascuns pentru a face un părinte în înălțime pentru a găzdui un copil plutitoare în timp ce crearea spațiului potrivit pentru alte elemente după "Float" și pentru a opri frații din ambalaj "plutește.

Și așa faceți un element să trăiască în apropierea unui "Float" fără compromisuri.

Există o altă metodă în care elementele nu vor fi niciunde în apropierea surorilor lor "Float". Utilizând clar atributul puteți face un element liber de a fi aproape de un "Float".

clar: stânga; clar: drept; clar: ambele; 

stânga valoarea șterge toate "Plăcile" din stânga elementului și invers pentru dreapta, și pe ambele părți pentru ambii. Acest clar atributul poate fi folosit pe un divorț, div divor sau pe pseudo element ca pe convenabil.

rezumat

1. Elementele absolute / fixe nu vor pluti.
2. Un "plutitor" nu merge deasupra elementului inainte de în cod.
3. Dacă nu există suficient spațiu în container, un "plutire" va fi împins în jos.
4. Toate "plutitoare" sunt făcute în elemente de bloc.
5. Dacă lățimea nu este specificată pe un "Float", se va micșora pentru a se potrivi conținutului.
6. Ultimii frați ai unui "Float" fie îi vor înconjura (inline și text), fie îi vor înfășura (blocuri).
7. Pentru a opri un element din împachetarea unui "Float", utilizați overflow: ascuns.
8. Părinții unui "plutitor" nu își vor crește înălțimea pentru a se potrivi flotorului.
9. Pentru a face ca părintele să crească înălțimea în funcție de "Float", utilizați overflow: ascuns (sau să creezi un frate gol cu clar după)
10. Pentru a preveni ca un element să fie în apropierea oricărui "Float", utilizați clar atribut.