CSS flydende
- forrige side CSS absolut positionering
- næste side CSS element vælger
Den flydende boks kan flyttes til venstre eller højre, indtil dens ydre kant rører ved indholdskassens eller en anden flydende boks' kant.
Da den flydende boks ikke er i dokumentets normale strøm, opfører blokke i dokumentets normale strøm sig som om den flydende boks ikke findes.
CSS flydende
Se figuren nedenfor, når kasse 1 flyttes til højre, frigør den dokumentstrømmen og flyttes til højre, indtil dens højre kant rører ved indholdskassens højre kant:
Se figuren nedenfor igen, når kasse 1 flyttes til venstre, frigør den dokumentstrømmen og flyttes til venstre, indtil dens venstre kant rører ved indholdskassens venstre kant. Fordi den ikke længere er i dokumentstrømmen, tager den ikke plads, og dækker faktisk kasse 2, så kasse 2 forsvinder fra synet.
Hvis de tre kasser alle flyttes til venstre, flyttes kasse 1 til venstre, indtil den rører ved indholdskassen, og de to andre kasser flyttes til venstre, indtil de rører ved den forrige flydende kasse.
Som vist i figuren nedenfor, hvis indholdskassen er for smal til at indeholde de tre vandrette rækkefølgede flydende elementer, flyttes de andre flydende blokke nedad, indtil der er nok plads. Hvis højden på de flydende elementer er forskellig, kan de blive "hægtet" af andre flydende elementer, når de flyttes nedad:
CSS float egenskab
I CSS implementerer vi elementets flydende tilstand gennem float-egenskaben.
For mere information om float-egenskaben, besøg referencemanualen:CSS float egenskab。
Rammeverk og rydning
Rammeverket ved siden af den flydende boks缩短，从而为飞出框留出空间，飞出框围绕飞出框。
Derfor kan oprettelse af en flydende boks gøre, at teksten omgiver billedet:
For at forhindre at rammeverket omgiver den flydende boks, skal dette rammeverk anvendes clear-attributten.clear-attributten kan have værdierne left, right, both eller none, hvilket angiver hvilke kanter af rammen, der ikke skal være ved siden af den flydende ramme.
For at opnå dette resultat, tilføj en margin til det rengjorte elementØverste marginTilføj nok plads, så elementets øverste kant falder ned til under den flydende ramme:
Dette er et nyttigt værktøj, der lader omgivende elementer lade plads til den flydende element.
Lad os se nærmere på flydende og rengøring. Antag, at du vil have et billede til at flyde til venstre for en tekstblok og ønsker, at billedet og teksten skal være indeholdt i en anden element med baggrundsfarve og 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>nogle tekst</p>
</div>
I dette tilfælde opstår der et problem. Fordi den flydende element forlader dokumentstrømmen, tager den flydende div med billeder og tekst ikke plads.
Hvordan får man omgivelserne omkring elementet til at visuelt omgøre den flydende element? Det kræver, at man anvender clear på et sted i dette element:
Uheldigvis opstod der et nyt problem, fordi der ikke er nogen eksisterende elementer, der kan anvende rengøring, så vi må tilføje en tom element og rengøre 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>nogle tekst</p>
<div class="clear"></div>
</div>
Dette vil give det ønskede resultat, men kræver yderligere kode. Der er ofte elementer, der kan anvende clear, men nogle gange skal man tilføje meningsløs markup for at få layoutet til at fungere.
Men vi har også en anden metode, nemlig at flytte container-div'en:
.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>nogle tekst</p>
</div>
Dette vil give det ønskede resultat. Uheldigvis vil næste element blive påvirket af denne flydende element. For at løse dette problem vælger nogle at flytte alt i layoutet og derefter bruge passende meningsfulde elementer (ofte sitets footer) til at rengøre disse flydende. Dette hjælper med at reducere eller fjerne unødvendig markup.
Faktisk bruger alle sider på CodeW3C.com denne teknik, og hvis du åbner den CSS-fil, vi bruger, vil du se, at vi har rengjort footers div, og de tre div over footeren flyder til venstre.
CSS clear egenskab
Vi diskuterede netop i detaljer CSS's rengøringsmekanisme og anvendelsesmetoder for clear-attributten. Hvis du vil lære mere om clear-attributten, besøg venligst referencehandbogen:CSS clear egenskab。
Eksempel på flydende og rensning
- En simpel anvendelse af float egenskab
- Lad et billede flyde til højre i et afsnit
- Lad et billede med kant og ramme flyde til højre i afsnittet
- Lad et billede flyde til højre i afsnittet. Tilføj kant og ramme til billedet.
- Billede med titel flyder til højre
- Lad et billede med titel flyde til højre
- Lad afsnittets første bogstav flyde til venstre
- Lad afsnittets første bogstav flyde til venstre og tilføj stil til dette bogstav.
- Opret en horisontal menu
- Opret en horisontal menu ved hjælp af en enkelt kolonne med hyperlinks, der flyder.
- Opret en startside uden tabeller
- Brug flydende til at skabe en startside med hovedside, fødder, venstre indholdsfortegnelse og hovedindhold.
- Fjern elementets side
- Dette eksempel viser, hvordan man bruger at fjerne flydende elementer fra siden af en element.
- forrige side CSS absolut positionering
- næste side CSS element vælger
