Atunci când numai elementele flotante (plutitoare) se află în interiorul blocului părinte, blocul părinte este restrâns. Modul de eliminare a fluxului și extinderea blocului parental va fi discutat în continuare.
Înainte de a începe, să denotăm câteva definiții:
- un bloc parental poate fi numit orice bloc în raport cu blocurile sale închise, de exemplu un bloc
- - mamă pentru elementele din listă cuprinse în acesta -
- ;
- Blocul pentru copii este, respectiv, orice bloc închis față de partea de sus.Semnificăm problema eficientizării
Să facem o listă obișnuită, ale cărei elemente plutesc: stânga;
Ca rezultat, blocul părinte se prăbușește:
(pentru claritate, am prescris o placă roșie pentru elementul părinte)
Pentru ca acest lucru să nu se întâmple, este necesar să eliminați raționalizarea după elementele listate și, în acest scop, există mai multe moduri.
Eliminați raționalizarea
Prima modalitate de a lupta este de a specifica overflow: ascuns pentru elementul parent.
Astfel, eliminăm raționalizarea, blocul părinte înțelege unde se termină elementele plutitoare, iar colapsurile nu au loc.
Este posibil ca această opțiune să nu fie potrivită în cazul în care aveți un meniu cu sub-elementele drop-down, deoarece blocul părinte va tăia elementele drop-down.
A doua cale.
A doua metodă este foarte bună și are suport pentru mai multe browsere. Trebuie să marcați elementul părinte ca bloc inline și să setați lățimea la 100%.Problema cu spațiul alb al elementelor inline poate fi rezolvată citirea acestui post CSS - cum se elimină lacunele între blocurile inline?
A treia cale.
Este posibil să se adauge trivial în interiorul blocului părinte, la sfârșitul încă un bloc în care să se înregistreze stiluri cu curățarea raționalizării.Și prescrie stilurile pentru clasa .clear
Dar această opțiune nu este foarte practică, pentru că Creați un element separat gol în aspectul nostru, ceea ce nu este bun
A patra cale.
De fapt, respinge soluția anterioară, dar în loc de a crea un bloc gol, vom folosi pseudo-elementul: după.Aceasta este o soluție mult mai estetică!
Pentru dvs., toate exemplele cu stilul Mi expuse în demo, puteți potestit pe diferite browsere și alegeți propria versiune.
Trimiteți-le prietenilor: