Fixem-nos en els desavantatges del flotador. Com es comporten els elements de bloc i en línia i si s’utilitzen junts. Analitzem què és una pèrdua i com fer-hi front.
Tot i que a l'últim article vam crear una quadrícula senzilla per al lloc mitjançant flotants, originalment estan destinats a ajustar el flux d'elements del text. Float té tres significats: esquerra: els elements s’enganxen al marge esquerre; dreta: es premen els elements cap a la vora dreta; cap: el mode d'ajustament està desactivat.
Un element embolicat amb flotador es pot dimensionar i encoixinar, però si l'element està en línia, es comportarà com un element de bloc.
.block1 {
flotador: esquerra;
amplada: 150 px;
}
.block2 {
flotador: dret;
amplada: 150 px;
}
Hi ha un altre problema a l’hora d’utilitzar flotadors, que cau del flux. Apareix quan els blocs van un darrere l’altre, però només un d’ells té la propietat float, llavors estarà a la part superior de la resta, perquè no veu altres blocs. Els elements en línia s’ajustaran als elements flotants, però el bloc que conté aquest text romandrà sota l’element flotant.
Però, com interactua el float amb el float?
Es comporten com un text: es mantenen un darrere l’altre sempre que hi hagi espai lliure i després es mouen a una nova línia. Per tant, amb l’ajut de flotadors, vam començar a construir reixetes. Si no queda espai, es mouen més enllà de l’amplada del lloc, és a dir, no van enlloc.
Si el float no veu elements de bloc simples, es pot ensenyar als elements de bloc a veure el float. Utilitzem la propietat clear, que desactiva l’ajust de tots els costats (o dels seleccionats). És a dir, un element amb clar caurà sota l’element amb float.
