CSS-ejendommen er en meget vigtig ejendom til layout. Det giver dig mulighed for at placere dine websidedesigner nøjagtigt som du vil have dem til at vise - men for at kunne bruge det skal du forstå, hvordan det fungerer.
I et stilark ser CSS-floategenskaben sådan ud:
.right {float: right; }
Dette fortæller browseren, at alt med klassen "højre" skal flydes til højre.
Du ville tildele det sådan:
class = "right" />
Hvad kan du flyde med CSS float Ejendommen?
Du kan ikke flyde hvert element på en webside. Du kan kun flyde blokniveau elementer. Dette er de elementer, der optager en blok plads på siden, som billeder (), afsnit (), divisioner () og lister ().
Andre elementer, der påvirker tekst, men skaber ikke en boks på siden kaldes inline-elementer og kan ikke flydes. Disse er elementer som span (), linjeskift (), stærk vægt () eller kursiv ().
Hvor flyder de?
Du kan flyde elementer til højre eller venstre. Ethvert element, der følger det flydede element, vil strømme rundt om det floerede element på den anden side.
Hvis jeg for eksempel flyder et billede til venstre, vil enhver tekst eller andre elementer, der følger med den, flyde rundt om det til højre. Og hvis jeg flyder et billede til højre, vil enhver tekst eller andre elementer, der følger den, flyde rundt om det til venstre. Et billede, der er placeret i en tekstblok uden nogen float-stil, der er anvendt på den, viser, at browseren er indstillet til at vise billeder. Dette er normalt med den første linje med følgende tekst, der vises nederst på billedet.
Hvor langt vil de flyde?
Et element, der er blevet fløjet, bevæger sig så langt til venstre eller højre for beholderelementet som muligt. Dette resulterer i flere forskellige situationer afhængigt af, hvordan din kode er skrevet. For disse eksempler vil jeg flyve en lille DIV element til venstre:
- Hvis det flytede element ikke har en foruddefineret bredde, vil den optage så meget vandret plads som nødvendigt og tilgængeligt, uanset float. Bemærk: Nogle browsere forsøger at placere elementer ved siden af flydende elementer, når bredden ikke er defineret - hvilket normalt giver det ikke-flydende element kun en lille smule plads. Så skal du Definer altid en bredde på flydende elementer.
- Hvis beholderelementet er HTML-elementet, flyder det
DIVvil sidde på venstre side af siden. - Hvis beholderelementet selv er indeholdt af noget andet, flyder den
DIVvil sidde på venstre side af beholderen. - Du kan rede floated elementer, og det kan resultere i float slutter på et overraskende sted. For eksempel er denne float en venstreflot
DIVinde i en højre floatedDIV. - Flydende elementer sidder ved siden af hinanden, hvis der er plads i beholderen. For eksempel har denne beholder tre 100px brede
DIVelementer flydede i en 400px bred container.
Du kan endda bruge floats til at oprette et fotogalleri layout. Du sætter hver miniaturebillede (det virker bedst, når de er lige store) i a DIV med billedteksten og float den DIV elementer i beholderen. Uanset hvor bredt browservinduet er, vil miniaturebillederne stå ensartet.
Slukning af float
Når du ved, hvordan du får et element til at flyde, er det vigtigt at vide, hvordan du slukker flyderen. Du slukker flyderen med CSS Clear Property. Du kan rydde venstre flåd, højre flåd eller begge dele:
clear: left;klare: højre;klare: begge;
Ethvert element, som du angiver den klare egenskab for, vises under et element, der flyder i den retning. For eksempel, i dette eksempel er de to første afsnit i teksten ikke ryddet, men den tredje er.
Spil med den klare værdi af forskellige elementer i dine dokumenter for at få forskellige layouteffekter. Et af de mest interessante floated layouts er en række billeder ned til højre eller venstre kolonne ud for tekststykker. Selvom teksten ikke er lang nok til at rulle forbi billedet, kan du bruge ryddet på alle billederne for at sikre, at de vises i kolonnen frem for ved siden af det forrige billede.
HTML (gentag dette afsnit):
Duis aute irure dolor sed do eiusmod tempor incididunt i reprehenderit in voluptate. Cupidatat non proident, ud labore et dolore magna aliqua.
CSS (at flyde billederne til venstre):
img.float {float: left; klar: venstre; margin: 5px;}
Og til højre:
img.float {float: right; klar: højre; margin: 5px;}
Brug af Floats for Layout
Når du forstår hvordan flyde ejendomsarbejder, kan du begynde at bruge det til at udarbejde dine websider. Dette er de trin, jeg tager for at oprette en flydende webside:
- Design layoutet (på papir eller i et grafikværktøj eller i mit hoved).
- Bestem, hvor sidedivisionerne skal være.
- Bestem bredderne af de forskellige beholdere og elementerne i dem.
- Flyd alt. Selv det yderste beholderelement flyder til venstre, så jeg ved, hvor det vil være i forhold til browservisningsporten.
Så længe du kender bredderne (procentdelene er fine) i dine layoutafsnit, kan du bruge flyde ejendom til at sætte dem, hvor de hører til på siden. Og det rareste er, du behøver ikke bekymre dig så meget om, at boksemodellen er anderledes for Internet Explorer eller Firefox.
