Să fim atenți la dezavantajele plutitorului. Cum se comportă elementele bloc și inline între ele și dacă le folosim împreună. Să analizăm ce este o pierdere și cum să o facem.
În ciuda faptului că în ultimul articol am construit o grilă simplă pentru site folosind flotante, acestea sunt inițial destinate să ajusteze fluxul de elemente din text. Float are trei semnificații: stânga - elementele se lipesc de marginea stângă; dreapta - elementele sunt apăsate pe marginea dreaptă; none - Modul Wrap este dezactivat.
Un element învelit cu flotor poate fi dimensionat și căptușit, dar dacă elementul este în linie, acesta se va comporta ca un element bloc.
.block1 {
plutește la stânga;
lățime: 150px;
}
.block2 {
plutitor: dreapta;
lățime: 150px;
}
Există o altă problemă atunci când se utilizează flotante, care cade din flux. Apare atunci când blocurile merg unul după altul, dar doar unul dintre ele are proprietatea float, atunci va fi deasupra celorlalte, deoarece nu vede alte blocuri. Elementele în linie vor înfășura elemente plutitoare, dar blocul care conține acest text va rămâne sub elementul plutitor.
Dar cum interacționează float cu float?
Se comportă ca un text: stau unul după altul atâta timp cât există spațiu liber, apoi se mută pe o nouă linie. Prin urmare, cu ajutorul flotoarelor, am început să construim grile. Dacă nu mai există spațiu, atunci acestea sunt mutate dincolo de lățimea site-ului, adică nu merg nicăieri.
Dacă plutitorul nu vede elemente simple de bloc, atunci elementele blocului pot fi învățate să vadă plutitorul. Folosim proprietatea clear, care dezactivează împachetarea din toate părțile (sau din cele selectate). Adică, un element cu clar va cădea sub elementul cu float.
