CSS layout - clear och clearfix

clear egenskapen

clear Egenskapen specificerar vilka element som kan flyta vid sidan av det element som tas bort och på vilket håll.

clear Egenskapen kan sättas till en av följande värden:

  • none - Det är tillåtet att ha flytande element på båda sidor. Standardvärde
  • left - Det är inte tillåtet att ha flytande element på vänster sida
  • right - Det är inte tillåtet att ha flytande element på höger sida
  • both - Det är inte tillåtet att ha flytande element på båda sidor
  • inherit - Elementet tar över sin faders clear-värde

använd clear Egenskapens vanligaste användning är när element använder flyt Efter egenskapen.

När du tar bort flytning, bör du matcha den med flytningen: om en element flyter till vänster, bör vänster sida tas bort. Dina flytande element kommer att fortsätta att flyta, men de element som tas bort kommer att visas under dem.

Nedanstående exempel kommer att ta bort den vänstra flytningen. Det innebär att det inte är tillåtet att ha flytande element på vänster sida av (div):

Exempel

div {
  clear: left;
}

Prova själv

clearfix Hack

Om en element är högre än det element som innehåller den och det är flytande, kommer det att "överskrida" till dess behållare utanför:

Då kan vi lägga till overflow: auto; till innehållselementet för att lösa detta problem:

Exempel

.clearfix {
  overflow: auto;
}

Prova själv

Så länge du kan kontrollera marginaler och inre marginaler (annars kanske du ser rullgardin), kommer overflow: auto clearfix att fungera bra. Men den nya moderna clearfix-tekniken är säkrare att använda, och följande kod används på de flesta webbplatser:

Exempel

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

Prova själv

Du kommer att lära dig mer om detta senare i kapitlet ::after Pseudo-element.