Faisons attention aux inconvénients du flotteur. Comment les éléments de bloc et en ligne se comportent les uns avec les autres et s'il faut les utiliser ensemble. Analysons ce qu'est une perte et comment y faire face.
Malgré le fait que dans le dernier article nous avons construit une grille simple pour le site à l'aide de flottants, ils sont à l'origine destinés à ajuster le flux d'éléments dans le texte. Float a trois significations: left - les éléments collent à la marge de gauche; droit - les éléments sont pressés vers le bord droit; aucun - Le mode Wrap est désactivé.
Un élément flottant peut être dimensionné et rembourré, mais si l'élément est en ligne, il se comportera comme un élément de bloc.
.block1 {
flotteur: gauche;
largeur: 150px;
}
.block2 {
Flotter à droite;
largeur: 150px;
}
Il y a un autre problème lors de l'utilisation de flotteurs, qui tombe hors du flux. Il apparaît lorsque les blocs vont les uns après les autres, mais qu'un seul d'entre eux a la propriété float, alors il sera au-dessus des autres, car il ne voit pas les autres blocs. Les éléments en ligne envelopperont les éléments flottants, mais le bloc contenant ce texte restera sous l'élément flottant.
Mais comment le flotteur interagit-il avec le flotteur ?
Ils se comportent comme du texte: ils se succèdent tant qu'il y a de l'espace libre, puis passent à une nouvelle ligne. Par conséquent, à l'aide de flotteurs, nous avons commencé à construire des grilles. S'il n'y a plus d'espace, ils sont déplacés au-delà de la largeur du site, c'est-à-dire qu'ils ne vont nulle part.
Si le flotteur ne voit pas les éléments de bloc simples, alors les éléments de bloc peuvent apprendre à voir le flotteur. Nous utilisons la propriété clear, qui désactive le wrapping de tous les côtés (ou de ceux sélectionnés). C'est-à-dire qu'un élément avec clear tombera sous l'élément avec float.
