Clearfix hack este o modalitate populară de a afișa corect blocurile plutitoare, ceea ce vă permite să nu recurgeți la mese atunci când faceți planuri. Necesitatea apare atunci când începeți să observați că înălțimea blocului părinte al DIV nu se potrivește cu conținutul moștenitorilor. De exemplu, ați conceput o astfel de organizare a blocurilor de pe site-ul dvs. (pentru claritate, blocul părinte este evidențiat în galben, iar copiii sunt verzi și roșii):
Pentru ce a scris o astfel de pagină HTML:
și la ea foaia de stil CSS corespunzătoare:
Cu toate acestea, în realitate veți obține această imagine:
Parintele DIV nu imbratiseaza copiii. Adică, nu se întinde peste înălțimea blocurilor sale. Și nu există nici o greșeală aici, doar în layout utilizează blocuri plutitoare (property FLOAT). Elementele plutitoare ieșesc din firul curent și își creează propriile în contextul părintelui. În acest caz, pentru un flux extern, acestea nu vor avea dimensiuni. Și pentru ca părinții DIV să țină cont de mărimea lor și întinși de conținutul lor, este nevoie de un mic truc.
Două moduri de a întinde dimensiunea DIV părinte de conținutul blocurilor pe care le conține
Anterior, am folosit un astfel de bloc suplimentar înainte de eticheta de închidere a părintelui DIV:
Apoi, aspectul paginii corespundea destinației:
Cea de-a doua modalitate de a face div divorât se întinde de-a lungul înălțimii copilului
Puteți crea un container "cu autocurățire" prin pseudo-clasa după:
Și adăugați clasa corespunzătoare la blocul părinte:
Aspectul paginii va corespunde, de asemenea, aspectului planificat:
Ambele metode funcționează bine. Și puteți rezolva problema blocurilor plutitoare, astfel încât părintele DIV să se întindă de-a lungul înălțimii conținutului copiilor.
Vedeți și: Bara laterală Sticky WordPress fără plug-inuri. CSS și Theia Sticky Sidebar.
Lista surselor utilizate
Trimiteți-le prietenilor: