CSS layout - clear og clearfix

clear egenskaben

clear Egenskaben specificerer, hvilke elementer der kan flyde ved siden af det fjernede element samt hvilken side.

clear Egenskaben kan sættes til en af følgende værdier:

  • none - Begge sider må have flydende elementer. Standardværdi
  • left - Venstre side må ikke have flydende elementer
  • right - Højre side må ikke have flydende elementer
  • both - Både venstre og højre side må ikke have flydende elementer
  • inherit - Elementet arver dens forældres clear værdi

brug clear Egenskabets mest almindelige brug er på elementer, der bruger float Egenskabsbetingelserne.

Når du fjerner flydende elementer, skal du matche fjernelse med flydende: Hvis et element flyder til venstre, skal du fjerne venstre. Dine flydende elementer vil fortsætte med at flyde, men de fjernede elementer vil vises nedenfor.

Følgende eksempel vil fjerne den venstre flydende element. Det betyder, at der ikke må være flydende elementer på venstre side af (div):

Eksempel

div {
  clear: left;
}

Prøv det selv

clearfix Hack

Hvis et element er højere end det element, der indeholder det, og det er flydende, vil det 'flyde' uden for dens container:

Dernæst kan vi tilføje overflow: auto; til indeholderen for at løse dette problem:

Eksempel

.clearfix {
  overflow: auto;
}

Prøv det selv

Så kan vi tilføje overflow: auto; til indeholderen for at løse dette problem:

Eksempel

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Prøv det selv

Du vil lære om dette senere i kapitlet ::after Pseudo-elementer.