CSS Float
- Vorige Pagina CSS Absoluut Positioneren
- Volgende Pagina CSS Element Selectors
Floatende kaders kunnen naar links of naar rechts bewegen totdat hun buitenste rand de rand van de omvattingbox of een andere float-box raakt.
Omdat de float-box niet in de normale stroom van het document staat, gedraagt de lijnbox in de normale stroom van het document zich alsof de float-box niet bestaat.
CSS Float
Zoals te zien in de onderstaande figuur, wanneer kader 1 naar rechts wordt gefloat, raakt het de documentstroom en verplaatst het zich naar rechts totdat de rechterrand van het kader de rechterrand van de omvattingbox raakt:
Zoals te zien in de onderstaande figuur, wanneer kader 1 naar links wordt gefloat, raakt het de documentstroom en verplaatst het zich naar links totdat de linkse rand van het kader de linkse rand van de omvattingbox raakt. Omdat het niet langer in de documentstroom staat, neemt het geen ruimte in en overlapt het feitelijk kader 2, waardoor kader 2 uit het zicht verdwijnt.
Als alle drie de kaders naar links worden verplaatst, blijft kader 1 naar links floaten totdat het de omvattingbox raakt, en de andere twee kaders blijven naar links floaten totdat ze de vorige float-box raken.
Zoals te zien in de onderstaande figuur, als de omvattingbox te smal is om de horizontaal geplaatste drie float-elementen te bevatten, dan verplaatsen de andere float-blokken naar beneden totdat er voldoende ruimte is. Als de hoogte van de float-elementen verschillend is, kunnen ze mogelijk worden 'gevangen' door andere float-elementen wanneer ze naar beneden bewegen:
CSS float eigenschap
In CSS realiseren we het floaten van elementen via de float-eigenschap.
Voor meer informatie over de float-eigenschap, raadpleeg het referentiemanual:CSS float eigenschap。
Lijnbox en schoonmaken
De lijnbox naast de float-box wordt verkort, waardoor er ruimte wordt gecreëerd voor de float-box, en de lijnbox om de float-box omheen beweegt.
Dus, het maken van een float-box maakt het mogelijk om tekst om een afbeelding te laten omcirkelen:
Om te voorkomen dat een lijnbox zich om een float-box heen beweegt, moet je deze box toepassen clear-eigenschap. De waarde van de clear-eigenschap kan left, right, both of none zijn, wat aangeeft welke kanten van het frame niet aan het floatvak mogen grenzen.
Om dit effect te bereiken, in de elementen die worden schoongemaakt,bovenmargeVoeg voldoende ruimte toe aan de bovenste marges, zodat de toprand van het element loodrecht daalt onder het floatvak:
Dit is een nuttig hulpmiddel dat ervoor zorgt dat de omringende elementen ruimte voor het floatende element laten.
Laten we uitgebreid kijken naar floaten en schoonmaken. Stel dat je een afbeelding wilt floaten naar de linkerkant van een tekstblok en je wilt dat deze afbeelding en tekst in een ander element zitten dat een achtergrondkleur en rand heeft.
.news {
achtergrondkleur: grijs;
border: solid 1px zwart;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>enkele tekst</p>
</div>
In dit geval ontstaat er een probleem. Omdat floatende elementen de stroom van het document verlaten, neemt de div om de afbeelding en tekst heen geen ruimte in.
Hoe kan je een omringend element visueel om een floatende element heen hebben? Je moet op een bepaalde plek in dit element clear toepassen:
Helaas is er een nieuw probleem ontstaan, omdat er geen bestaand element is om schoon te maken, kunnen we alleen een lege element toevoegen en deze schoonmaken.
.news {
achtergrondkleur: grijs;
border: solid 1px zwart;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>enkele tekst</p>
<div class="clear"></div>
</div>
Dit levert het gewenste effect op, maar vereist extra code. Vaak kunnen elementen clear toepassen, maar soms moet je onnodige markeringen toevoegen om de lay-out te doen.
Maar we hebben ook een andere manier, dat is het floaten van de container div:
.news {
achtergrondkleur: grijs;
border: solid 1px zwart;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>enkele tekst</p>
</div>
Dit levert het gewenste effect op. Helaas wordt de volgende element beïnvloed door deze float. Om dit probleem op te lossen, kiezen sommigen om alles in de lay-out te floaten en vervolgens de floaten schoon te maken met passende elementen (meestal de voettekst van de site). Dit helpt om onnodige markeringen te verminderen of te verwijderen.
In feite gebruiken alle pagina's op de CodeW3C.com-website deze techniek. Als je de CSS-bestanden opent, zie je dat we de div van de voettekst hebben schoongemaakt, en de drie div's boven de voettekst gaan naar links.
CSS clear eigenschap
We hebben net in detail besproken hoe CSS schoonmaak werkt en de toepassing van de clear-eigenschap. Als je meer wilt weten over de clear-eigenschap, bezoek dan het referentiemanual.CSS clear eigenschap。
Voorbeelden van float en schoonmaken
- Eenvoudige toepassing van float eigenschap
- Maak een afbeelding float aan de rechterkant van een alinea
- Maak een afbeelding met rand en marge float aan de rechterkant van een alinea
- Maak een afbeelding float aan de rechterkant van een alinea. Voeg een rand en een marge toe aan de afbeelding.
- Een afbeelding met een titel float aan de rechterkant
- Maak een afbeelding met een titel float aan de rechterkant
- Maak de eerste letter van een alinea float aan de linkerkant
- Maak de eerste letter van een alinea float aan de linkerkant en voeg stijlen toe aan deze letter.
- Maak een horizontaal menu
- Maak een horizontale menu met float en een kolom met hyperlinks.
- Maak een homepage zonder tabellen
- Gebruik float om een homepage te maken met kop, voettekst, linkse inhoudsopgave en hoofdinhoud.
- Schoonmaken van de zijkant van het element
- Dit voorbeeld toont hoe je de float-elementen aan de zijkant van het schoonmaken element kunt gebruiken.
- Vorige Pagina CSS Absoluut Positioneren
- Volgende Pagina CSS Element Selectors
