CSS Layout - Opzuiveren en clearfix

clear eigenschap

clear De eigenschap specificeert welke elementen naast het verwijderde element mogen floaten en aan welke kant.

clear De eigenschap kan een van de volgende waarden instellen:

  • none - floatende elementen zijn toegestaan aan beide kanten. Standaardwaarde
  • left - geen floatende elementen zijn toegestaan aan de linkerkant
  • right - geen floatende elementen zijn toegestaan aan de rechterkant
  • both - geen floatende elementen zijn toegestaan aan beide kanten
  • inherit - het element neemt de waarde van clear van zijn ouder over

wordt gebruikt clear De meest voorkomende toepassing van de eigenschap is op elementen waarbij float na de eigenschap.

Bij het verwijderen van de float, moet men de float en het verwijderen matchen: als een element naar links float, moet de linkerkant worden verwijderd. Uw floatende elementen zullen blijven floaten, maar de verwijderde elementen zullen onder hen worden weergegeven.

Hier is een voorbeeld dat de linkszijdse float verwijdert. Dit betekent dat er geen floatende elementen aan de linkerkant van (de div) mogen zijn:

Voorbeeld

div {
  clear: left;
}

Probeer het zelf

clearfix Hack

Als een element hoger is dan het element dat het bevat en het zelf floatend is, zal het 'overstromen' naar buiten de container:

Vervolgens kunnen we overflow: auto; toevoegen aan de container om dit probleem op te lossen:

Voorbeeld

.clearfix {
  overflow: auto;
}

Probeer het zelf

Zolang u de marges en padding kunt controleren (anders ziet u mogelijk een scrollbar), werkt overflow: auto clearfix goed. Maar de nieuwe moderne clearfix hack is veiliger te gebruiken, en de volgende code wordt toegepast op de meeste websites:

Voorbeeld

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

Probeer het zelf

U zult dit later in het hoofdstuk leren ::after Pseudo-elementen.