CSS: n selkeyden selvittäminen

Selvä CSS-ominaisuus on ollut osa CSS: tä, koska CSS1. Sen avulla voit määrittää, mitä elementtejä voi kellua poistetun elementin viereen ja kummalle puolelle. Selkeällä omaisuudella on viisi mahdollista arvoa:

Miten CSS: n käyttäminen poistaa kohteen

Yleisin tapa käyttää selkeää ominaisuutta on sen jälkeen, kun olet käyttänyt float-ominaisuutta elementissä. Esimerkiksi:

Tekstin vieressä oleva kuva.

Teksti, joka on minun kuvani alapuolella.

Kaikki elementit oletusarvoisesti tyhjentynyt: ei mitään; , joten jos et halua muita elementtejä kellumaan vieressä jotain, sinun on muutettava selkeä tyyli.

Kun tyhjennät kellukkeita, tulet selkeästi kellumaan. Joten jos olet kellannut elementin vasemmalle, niin sinun pitäisi selvittää vasemmalle. Sinun kelluva elementti jatkuu kellumaan, mutta tyhjennetty elementti ja kaikki sen jälkeen näkyvät sen alla web-sivulla.

Jos sinulla on elementtejä, jotka ovat kelluvia sekä oikealle että vasemmalle, voit tyhjentää vain yhden puolen tai voit poistaa molemmat.

Selkeät käytöt

Useimmat suunnittelijat käyttävät selkeää ominaisuutta tavallisimpia sivuelementtejä . Sinulla saattaa olla kuva, joka kelluu tekstin lohkon sisällä ja haluat, että seuraava kappale alkaa kuvan alapuolella tai sinulla voi olla koko sarake tekstiä, jonka haluat kellotaulun toisen tekstiryhmän viereen, jonkin tekstin alla.

Tässä on muotoilun HTML tässä muodossa.

Siinä on yksi div-kontti, jolla on toinen, joka kelluu vasemmalle.



Lyhyt kelluva div



Säilytysosaston sisällä olevat sisällöt, jotka tulevat kelluvan divin oikealle puolelle.

Tämä toimii hyvin, ja lyhyempi div leijuu vasemmalle pääosan divisioonan muusta sisällöstä.

Voit tyhjentää kelluvan laatikon vieressä olevan tekstin lisäämällä tunnuksen, johon haluat kirjoittaa kirjoitusalueen alle.

Mutta ongelma tulee, kun kelluva laatikko on pidempi kuin sen vieressä oleva sisältö. Sitten, kuten näet, pääruudun taustaväriä ei siirretä kelluvan laatikon pohjalle.

Onneksi on helppo tapa korjata tämä: omaisuus. Asettamalla pääruutu ylivuotoon: auto; taustaväri pysyy pidemmän kelluvan laatikon viereen pohjaan, kuten tässä esimerkissä esitetään .