CSS Float. Hack-ul clarifix. Elementul overflow: auto.

Susține Lectii-Virtuale!

The clearfix Hack

Dacă un element este mai înalt decât elementul care îl conține și este float, acesta se va „overflow” în afara containerului său:



Apoi putem adăuga overflow: auto; la elementul care conține pentru a remedia această problemă:

Exemplu:

.clearfix {
  overflow: auto;
}

overflow: auto clearfix  funcționează bine atâta timp cât sunteți în stare să păstrați controlul asupra margin-ului și a padding-ului (altfel puteți vedea bare de defilare). Totuși, noul clearfix hack however este mai sigur de utilizat și următorul cod este folosit pentru majoritatea paginilor web:

Exemplu:

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