Razumevanje Clear Property CSS

Jasna lastnost CSS je bila del CSS od CSS1. Omogoča, da določite, kateri elementi lahko plavajo poleg očiščenega elementa in na kateri strani (-ih). Jasna lastnost ima pet možnih vrednosti:

Kako uporabljati CSS jasno lastnost

Najpogostejši način uporabe jasne lastnosti je, ko uporabite lastnost plovca na elementu. Na primer:

Besedilo zraven moje slike.

Besedilo, ki je pod mojo sliko.

Vsi elementi privzeto izbrišejo: noben; , če ne želite, da se drugi elementi plavajo poleg nečesa, morate spremeniti jasen slog.

Ko očistite plavate, se vašemu plovilu jasno ujemata. Torej, če ste lebdeli element na levi, potem morate počistiti na levi. Vaš plavajoči element bo še naprej plavat, vendar se očiščeni element in vse, kar se po njej prikaže, pod njim na spletni strani.

Če imate elemente, ki se gibljejo v desno in levo, lahko izbrišete samo eno stran ali pa jih lahko izbrišete.

Uporaba izbrišite v postavitvah

Najpogostejši način, da večina oblikovalcev uporablja jasno lastnost, je v postavitvi elementov strani . Morda imate sliko, ki lebdi znotraj bloka besedila in želite, da se naslednji slog začne pod sliko, ali pa imate morda celoten stolpec besedila, ki ga želite plutati poleg drugega kupčka besedila, pri čemer je nekaj besedila prikazano spodaj.

Tukaj je HTML za postavitev v tej obliki.

Ima eno posodo div, ki drži drugo, ki se lebdi na levo.



Kratek divji div



Vsebina znotraj zabojnika, ki bo na desni strani plavajoče div.

To bo v redu, ko krajši div plava levo od preostale vsebine glavnega div.

Besedo lahko ob praznem polju izbrišete tako, da preprosto dodate oznako, v kateri želite, da začne pisati pod plavajočim poljem.

Toda težave prihajajo, ko je plavajoča škatla daljša od vsebine zraven nje. Potem, kot si lahko ogledate, barva ozadja glavnega polja ni prikazana na dnu plavajočega polja.

Na srečo je preprost način, da to popravite: premoženje. Z nastavitvijo glavnega polja na preliv: auto; bo barva ozadja ostala poleg daljše plavajoče škatle do samega dna, kot je prikazano v tem primeru .