Si vous n'avez pas besoin de prendre en charge IE9 ou une version antérieure, vous pouvez utiliser Flexbox librement et vous n'avez pas besoin d'utiliser des dispositions flottantes.
Il convient de noter qu'aujourd'hui, l'utilisation d'éléments flottants pour la mise en page est de plus en plus découragée par l'utilisation de meilleures alternatives.
display: inline-block
- Meilleur
- Flexbox - Meilleur (mais prise en charge limitée du navigateur)
Flexbox est pris en charge par Firefox 18, Chrome 21, Opera 12.10 et Internet Explorer 10, Safari 6.1 (y compris Mobile Safari) et le navigateur par défaut d'Android 4.4.
Pour une liste détaillée des navigateurs, voir: https://caniuse.com/flexbox .
(Peut-être qu'une fois que sa position est complètement établie, ce peut être la façon absolument recommandée de disposer les éléments.)
Un clearfix est un moyen pour un élément d' effacer automatiquement ses éléments enfants , de sorte que vous n'avez pas besoin d'ajouter de balisage supplémentaire. Il est généralement utilisé dans les dispositions flottantes où les éléments flottent pour être empilés horizontalement.
Le clearfix est un moyen de lutter contre le problème des conteneurs de hauteur nulle pour les éléments flottants
Un clearfix est effectué comme suit:
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Ou, si vous n'avez pas besoin du support IE <8, ce qui suit est très bien aussi:
.clearfix:after {
content: "";
display: table;
clear: both;
}
Normalement, vous devez faire quelque chose comme suit:
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</div>
Avec clearfix, vous n'avez besoin que des éléments suivants:
<div class="clearfix">
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
Lisez à ce sujet dans cet article - par Chris Coyer @ CSS-Tricks
div
se développera complètement à la bonne hauteur pour enfermer ses enfants flottants. webtoolkit.info/css-clearfix.html