CSS kelluminen

Liukuvat laatikot voivat siirtyä vasemmalle tai oikealle, kunnes niiden ulkoreuna tökkii sisältölaatikon tai toisen liukuvan laatikon reunaa.

Koska liukuvat laatikot eivät ole dokumentin virallisessa virrassa, dokumentin virallisen virran sisällä olevat lohkot käyttäytyvät, kuin liukuvat laatikot eivät olisi olemassa.

CSS kelluminen

Katso kuvasta, kun laatikko 1 siirtyy oikealle, se irrotetaan dokumentin virallisesta virrasta ja siirtyy oikealle, kunnes sen oikea reuna tökkii sisältölaatikon oikean reunan:

CSS kelluva esimerkki - kelluva elementti oikealle

Katso kuvasta, kun laatikko 1 siirtyy vasemmalle, se irrotetaan dokumentin virallisesta virrasta ja siirtyy vasemmalle, kunnes sen vasen reuna tökkii sisältölaatikon vasemman reunan. Koska se ei enää ole dokumentin virallisessa virrassa, se ei käytä tilaa, ja se peittää laatikon 2, jolloin laatikko 2 katoaa näkyvyydestä.

Jos kaikki kolme laatikkoa siirretään vasemmalle, laatikko 1 siirtyy vasemmalle, kunnes se tökkii sisältölaatikon reunaa, ja muut kaksi laatikkoa siirtyvät vasemmalle, kunnes ne tökkivät edellisen liukuvan laatikon reunaa.

CSS kelluva esimerkki - kelluva elementti vasemmalle

Kuten kuvassa näkyy, jos sisältölaatikko on liian kapea eikä pysty sisältämään kolmea vaakatasossa sijoitettua liukuvaa elementtiä, niin muut liukuvat lohkot siirtyvät alas, kunnes on riittävästi tilaa. Jos liukuvien elementtien korkeus on erilainen, ne voivat siirtyä alas ja mahdollisesti tulla jumiutumaan toisten liukuvien elementtien alle:

CSS kelluva esimerkki 2 - kelluva elementti vasemmalle

CSS float ominaisuus

CSS:ssä elementtien liikkuvuus toteutetaan float-ominaisuuden avulla.

Lisätietoja float-ominaisuudesta löydät viittauksesta:CSS float ominaisuus。

Rivilaatikko ja tyhjennys

Liukuvan laatikon viereinen rivilaatikko lyhenee, jotta liukuvalle laatikolle jää tilaa, ja rivilaatikko pyörii ympärillä liukuvaa laatikkoa.

Siksi luominen liukuvaa laatikkoa mahdollistaa tekstin pyörivän kuvan ympärillä:

Riviruudun ympärillä kelluva elementti

Jotta estetään rivejä pyörivän ympärillä, on kyettävä soveltamaan tätä laatikkoa clear-ominaisuusclear-ominaisuuden arvo voi olla left, right, both tai none, ja se ilmoittaa, mitkä reunat eivät saa olla liikkuvan kehän lähellä.

Tämän efektin saavuttamiseksi on lisättävä oikeaa elementtiinYlä reunaväliLisää riittävästi tilaa, jotta elementin yläreuna laskee suoraan liikkuvan kehän alapuolelle:

clear ominaisuuden esimerkki - riviruudulle sovellettu clear

Tämä on hyödyllinen työkalu, joka antaa ympäröiville elementeille tilaa liikkuvan elementin ympärillä.

Tarkastellaan tarkemmin liikkuvuutta ja siivousta. Oletetaan, että haluat kuvan liikkua tekstin vasemmalle puolelle ja että haluat kuvan ja tekstin sisällyttävän toisen elementin, jolla on taustaväri ja reunaviiva. Voit kirjoittaa seuraavan koodin:

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>jonkin tekstin</p>
</div>

Tässä tapauksessa ongelma syntyy. Koska liikkuvat elementit irtoavat dokumenttifluosta, ympäröivä div, joka sisältää kuvan ja tekstin, ei käytä tilaa.

Kuinka saada ympäröivä elementti näyttämään visuaalisesti ympäröivän liikkuvan elementin? On sovellettava clear:

clear ominaisuuden esimerkki - tyhjille elementeille sovellettu puhdistus

Valitettavasti on syntynyt uusi ongelma, koska ei ole olemassa elementtiä, johon voidaan soveltaa siivousta, joten meidän on lisättävä tyhjä elementti ja siivottava se.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>jonkin tekstin</p>
<div class="clear"></div>
</div>

Tämä mahdollistaa toivomamme tuloksen, mutta vaatii ylimääräistä koodia. Usein voidaan soveltaa clear, mutta joskus joutuu lisäämään merkityksetöntä merkintää asettelua varten.

Mutta meillä on toinenkin tapa, nimittäin viedä kontt dividend liikkuvaksi:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>jonkin tekstin</p>
</div>

Tämä antaa meille toivomamme tuloksen. Valitettavasti seuraava elementti kärsii tämän liukuvan elementin vaikutuksesta. Tämän ongelman ratkaisemiseksi jotkut valitsevat, että kaikki asetteluun liittyvät asiat tehdään liukuviksi ja sitten käytetään sopivia merkityksellisiä elementtejä (usein verkkosivuston jalkapalkki) näiden liikkuvien siivoukseen. Tämä auttaa vähentämään tai poistamaan tarpeetonta merkintää.

Itse asiassa, kaikki CodeW3C.com-sivuston sivut käyttävät tätä tekniikkaa, ja kun avaat CSS-tiedostomme, huomaat, että olemme tehneet sivun jalkapalkin div:n siivouksen, ja kolme div:ää sivun yläpuolella liikkuvat vasemmalle.

CSS clear ominaisuus

Meidän juuri käymämme keskustelu CSS:n siivouksen perusperiaatteista ja clear-ominaisuuden soveltamistavoista. Jos haluat oppia lisää clear-ominaisuudesta, vieraile viittausoppaassamme:CSS clear ominaisuus。

Kelluminen ja puhdistus esimerkki

float ominaisuuden yksinkertainen soveltaminen
Kelluta kuvaa yhden kappaleen oikealle puolelle
Kelluta reunalla ja reunalla olevaa kuvaa kappaleen oikealle puolelle
Kelluta kuvaa kappaleen oikealle puolelle. Lisää reunat ja reunat kuvaan.
Otsikolla varustettu kuva kelluu oikealle
Kelluta otsikolla varustettu kuva oikealle
Kelluta kappaleen ensimmäinen kirjain vasemmalle
Kelluta kappaleen ensimmäinen kirjain vasemmalle ja lisää tyyli tähän kirjaimeen.
Luo horisontaalinen valikko
Luo horisontaalinen valikko käyttämällä yhden linkin kelluvaa.
Luo ilman taulukkoa oleva etusivu
Luo etusivu, jossa on otsikko, alatunniste, vasen hakemisto ja pääsisältö käyttämällä kelluvaa.
Tyhjentävän elementin sivun laita
Tämä esimerkki näyttää, miten voit käyttää tyhjentävää elementtiä kelluvien elementtien sivun laidalla.