PGJ: Skapade sidan med 'Vanligtvis försöker alla blockelement att sätta en höjd som täcker in allt innehåll som finns i dem (om vi inte sätter `height` explicit vill säga). Nä...'

2019-01-13T15:05:24Z

Skapade sidan med 'Vanligtvis försöker alla blockelement att sätta en höjd som täcker in allt innehåll som finns i dem (om vi inte sätter <code>height</code> explicit vill säga). Nä...'

Ny sida

Vanligtvis försöker alla blockelement att sätta en höjd som täcker in allt innehåll som finns i dem (om vi inte sätter <code>[[height]]</code> explicit vill säga). När vi använder <code>[[float]]</code> lyfts dock de flytande elementen ur det normala layoutflödet och därför kommer de inte att räknas som en del av innehållet i föräldraelemetet. Detta kan orsaka en hel del problem.

En enkel lösning kan vara att även sätta <code>[[float]]</code> på föräldraelementet. Men i många fall varken kan eller vill man göra det. Då måste vi ta till en så kallad "clear fix". Det finns många varianter av denna fix, men om du lägger till följande kod i ditt stylesheet och sedan lägger till klassen <code>clearfix</code> till de blockelement som kräver en fix så bör allt fungera bra.
<div class="well well-cyanide-light">
<syntaxhighlight lang="css">
.clearfix::after {
content: "";
display: block;
clear: both;
}
</syntaxhighlight>
</div>
Tyvärr är det rätt vanligt förekommande att man behöver ta till dylika fullösningar för att få till exakt det beteende man är ute efter.

Clear fix - Versionshistorik

PGJ: Skapade sidan med 'Vanligtvis försöker alla blockelement att sätta en höjd som täcker in allt innehåll som finns i dem (om vi inte sätter height explicit vill säga). Nä...'

PGJ: Skapade sidan med 'Vanligtvis försöker alla blockelement att sätta en höjd som täcker in allt innehåll som finns i dem (om vi inte sätter `height` explicit vill säga). Nä...'