Kurskalender

CSS-avancerade lektioner

• CSS extra böcker
• CSS introduktion
• CSS grundläggande syntax
• CSS avancerad syntax
• CSS avledna väljare
• CSS id väljare
• CSS klass väljare
• CSS skapa
• CSS bakgrund
• CSS text
• CSS typsnitt
• CSS lista

CSS-rammodell

• CSS rammodell översikt
• CSS inre marginal
• CSS kant
• CSS marginal
• CSS marginal sammanslagning

CSS-positionering

• CSS positionering översikt
• CSS relativ positionering
• CSS absolut positionering
• CSS flytande

CSS-selektorer

• CSS element väljare
• CSS väljargrupp
• CSS klass väljare detaljer
• CSS ID väljare detaljer
• CSS egenskaps väljare detaljer
• CSS efterkommande väljare
• CSS underordnad element väljare
• CSS närliggande bror väljare

Valfria kurser

Kursrekommendation:

• CodeW3C.com gömstolen

Flödande ramar kan flytta till vänster eller höger tills dess yttre kant når kanten på inneslutningsramen eller en annan flödande ram.

Eftersom flödande ramar inte är i dokumentets vanliga ström, uppträder block i dokumentets vanliga ström som om flödande ramar inte finns.

CSS flytande

Se följande bild, när ram 1 flyttas till höger, flyttas den bort från dokumentströmmen och flyttas till höger tills dess högra kant kolliderar med den högra kanten på inneslutningsramen:

Se följande bild igen, när ram 1 flyttas till vänster, flyttas den bort från dokumentströmmen och flyttas till vänster tills dess vänstra kant kolliderar med den vänstra kanten på inneslutningsramen. Eftersom den inte längre är i dokumentströmmen tar den inte upp utrymme, och täcker faktiskt ram 2, vilket gör att ram 2 försvinner från vyn.

Om alla tre ramarna flyttas till vänster, flyttas ram 1 till vänster tills den kolliderar med inneslutningsramen, och de andra två ramarna flyttas till vänster tills de kolliderar med den föregående flödande ramen.

Som visas i följande bild, om inneslutningsramen är för smal för att innehålla tre horisontellt排列的 flödande element, flyttas andra flödande block ner tills det finns tillräckligt med utrymme. Om höjden på flödande element är olika, kan de kanske "fångas" när de flyttas ner av andra flödande element:

CSS float egenskap

I CSS implementerar vi elementets flödande genom float-egenskapen.

För mer information om float-egenskapen, besök referenshandboken:CSS float egenskap。

Raden och rengöring

Raden bredvid flödförkastningen förkortas, vilket ger utrymme för flödförkastningen, och raden kring flödförkastningen.

Därför kan skapa en flödförkastning omge text runt en bild:

För att förhindra att ramar kring flödförkastning, måste du tillämpa detta på ramen clear-egenskapen.clear-egenskapens värde kan vara left, right, both eller none, det betyder vilka sidor av rutan som inte bör komma i kontakt med flytande rutan.

För att uppnå detta effekt, i det rengjorda elementetsÖvermärgningLägg till tillräckligt med utrymme ovanpå elementet, så att elementets övre kant sjunker vertikalt ned till under flytande rutan:

Detta är ett användbart verktyg som låter omgivande element ge utrymme för flytande element.

Låt oss se närmare på flytande och rengöring. Anta att du vill flytta en bild till vänster om en textblock och att bilden och texten ska innehålla i en annan element med bakgrundsfärg och kant.

.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>some text</p>
</div>

I detta fall uppstår ett problem. Eftersom flytande elementet lämnar dokumentströmmen, tar inte div:en som omger bild och text plats.

Hur får man omgivande element att visuellt omge flytande element? Det måste appliceras clear på någon plats i detta element:

Tyvärr uppstod ett nytt problem, eftersom det inte finns några befintliga element att använda för rengöring, måste vi lägga till en tom element och rengöra den.

.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>some text</p>
<div class="clear"></div>
</div>

Detta ger oss den effekt vi vill ha, men det kräver extra kod. Det finns ofta element som kan använda clear, men ibland måste man lägga till meningslösa taggar för att göra layouten.

Men vi har också ett annat sätt, det är att flyta container-diven:

.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>some text</p>
</div>

Detta ger oss den effekt vi vill ha. Tyvärr påverkar nästa element denna flytande element. För att lösa detta problem väljer några att flyta alla element i layouten och sedan använda lämpliga men betydelselösa element (oftast webbplatsens fot) för att rengöra dessa flytande element. Detta hjälper till att minska eller eliminera onödiga taggar.

Faktiskt använder alla sidor på CodeW3C.com denna teknik, om du öppnar de CSS-filer vi använder, kommer du att se att vi har rengjort footerns div och att de tre div:arna ovanför footern flyter till vänster.

CSS clear egenskap

Vi diskuterade just nu i detalj hur CSS-rengöring fungerar och hur man använder clear-egenskapen. Om du vill lära dig mer om clear-egenskapen, besök referenshandboken:CSS clear egenskap。

verktygslåda

CSS referens handbok

CSS exempel

CSS prov

CSS handledning

Sponsrade länkar