Proprietatea clară CSS a făcut parte din CSS de la CSS1. Vă permite să precizați ce elemente pot pluti lângă elementul curățat și de ce parte (părți). Proprietatea clară are cinci valori posibile:
- nici unul
- stânga
- dreapta
- ambii
- moşteni
Cum să utilizați proprietatea CSS Clear
Cea mai obișnuită metodă de a utiliza proprietatea clară este după ce ați utilizat o proprietate float pe un element. De exemplu:
Text lângă imaginea mea.
Text sub imaginea mea.
Toate elementele implicite pentru a șterge: nici unul; , deci dacă nu doriți ca alte elemente să plutească alături de ceva, trebuie să schimbați stilul clar.
Când eliminați flotoarele, vă potriviți clar cu flota dvs. Deci, dacă ați plutit elementul în stânga, atunci ar trebui să clarificați la stânga. Elementul dvs. plutitor va continua să plutească, dar elementul șters și tot ce urmează va apărea sub el pe pagina web.
Dacă aveți elemente care sunt vărsate atât în dreapta cât și în stânga, puteți șterge doar o parte sau puteți șterge ambele.
Utilizați clar în Layouts
Cel mai obișnuit mod în care majoritatea designerilor folosesc proprietatea clară este în aspectul elementelor de pagină . S-ar putea să aveți o imagine care plutește într-un bloc de text și doriți ca paragraful următor să pornească sub imaginea respectivă sau puteți avea o întreagă coloană de text pe care doriți să o plutiți alături de o altă buclă de text, cu un text care apare mai jos.
Aici este HTML pentru un aspect în acest formular.
Ea are un container div care deține un alt care este plutit la stânga.
Un div divizat scurt
Conținutul din interiorul containerului div, care va fi în partea dreaptă a divului plutitor.
Acest lucru va funcționa bine, iar diviziunea mai scurtă plutește la stânga din restul conținutului divului principal.
Puteți șterge textul de lângă caseta plutitoare prin simpla adăugare a unei etichete în care doriți să înceapă scrierea sub caseta plutitoare.
Dar problema apare când cutia plutitoare este mai lungă decât conținutul de lângă ea. Apoi, după cum puteți vedea, culoarea de fundal a casetei principale nu este transportată în partea inferioară a casetei plutitoare.
Din fericire, există o modalitate ușoară de a repara acest lucru: proprietatea. Prin setarea casetei principale la supraincarcare: auto; culoarea de fundal va rămâne în dreptul casetei plutitoare mai lungi până la partea inferioară, după cum se arată în acest exemplu .