clar Proprietatea 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). clar proprietatea are cinci valori posibile:
nici unulstângadreaptaambiimoşteni
Cum să utilizați proprietatea CSS Clear
Cea mai obișnuită modalitate de a utiliza clar proprietatea este după ce ați folosit o pluti proprietate pe un element. De exemplu:
- Text lângă imaginea mea.
- Text sub imaginea mea.
Toate elementele implicite la clar: nici unul;, deci dacă nu doriți ca alte elemente să plutească alături de ceva, trebuie să le schimbați clar stil.
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 flotate atât în dreapta, cât și în stânga, puteți șterge doar o parte sau puteți șterge ambii.
Utilizați clar în Layouts
Cea mai obișnuită metodă pe care majoritatea designerilor o utilizează clar proprietatea 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.
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
Un div divizat scurt
Conținutul din interiorul containerului div, care va fi în partea dreaptă a divului plutitor.overflow: 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.
