Laten we aandacht besteden aan de nadelen van float. Hoe block- en inline-elementen zich met elkaar gedragen en of ze samen moeten worden gebruikt. Laten we analyseren wat een verlies is en hoe ermee om te gaan.
Ondanks het feit dat we in het vorige artikel een eenvoudig raster voor de site hebben gebouwd met behulp van floats, zijn ze oorspronkelijk bedoeld om de stroom van elementen in de tekst aan te passen. Float heeft drie betekenissen: left - de elementen blijven in de linkermarge; rechts - elementen worden tegen de rechterrand gedrukt; geen - Wrap-modus is uitgeschakeld.
Een met float verpakt element kan worden gedimensioneerd en opgevuld, maar als het element inline is, zal het zich gedragen als een blokelement.
.blok1 {
zweven: links;
breedte: 150px;
}
.blok2 {
drijven: rechts;
breedte: 150px;
}
Er is nog een probleem bij het gebruik van drijvers, die uit de stroom vallen. Het verschijnt wanneer de blokken na elkaar gaan, maar slechts één van hen de eigenschap float heeft, dan zal het bovenop de rest staan, omdat het geen andere blokken ziet. Inline-elementen wikkelen zich rond float-elementen, maar het blok met deze tekst blijft onder het float-element.
Maar hoe werkt float samen met float?
Ze gedragen zich als tekst: ze blijven achter elkaar staan zolang er vrije ruimte is en gaan dan naar een nieuwe regel. Daarom begonnen we met behulp van drijvers roosters te bouwen. Als er geen ruimte meer is, worden ze buiten de breedte van de site verplaatst, dat wil zeggen dat ze nergens heen gaan.
Als de vlotter geen eenvoudige blokelementen ziet, kan de blokelementen worden geleerd om de vlotter te zien. We gebruiken de eigenschap clear, die het inpakken van alle kanten (of van geselecteerde) uitschakelt. Dat wil zeggen, een element met helder zal onder het element met float vallen.
