Contenir un float dins la caixa pare
Publicat el 22/05/2004
Un problema de maquetació que es dóna sovint és el volguer que un element flotant no surti de la caixa que el conté.
La fórmula lògica és posar un clear a l'element següent del float però, què passa si no hi ha element següent?
Fins fa poc el que s'estilava era utilitzar un element extra (normalment un <br /> o un <hr /> amb la propietat clear).
Una manera millor, ja que no s'ha d'afegir res a l'XHTML és utilitzar el pseudo-element :after amb la caixa contenidora.
<div id="contenidor">
<div id="flotant">
contingut del div flotant
</div>
<p>
contingut d'un paràgraf
</p>
</div>
div#flotant {
float:left;
width: 100px;
}
div#contenidor {
background-color: #fc0;
}
div#contenidor:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
El que es fà és afegir un contingut (en aquest cas un punt) perquè el clear sigui efectiu. S'ha d'afegir la propietat display: block perque el contingut generat en un :after és inline.
La propietat height i visibility són perque el punt no es vegi.
El pseudo-element :after no funciona en IE però com que la mala implementació dels float ja treballa com es preten a l'usar l':after no serà un problema.
Vist a Logicola, l'artícle original està a positioniseverything.net.
Comentaris