Jetons un coup d'œil à la conception de la grille du site et décomposons les composants individuels. Voyons pourquoi float est si utile, ainsi que la technique populaire pour créer la première grille Web à partir de trois flux et d'un pied de page de site.
Pour étudier la construction en grille d'un site, il faut comprendre ce qu'est un « flux ». Les flux sont les éléments du site, situés les uns après les autres. Par exemple, il peut s'agir d'éléments div qui se succèdent par défaut. Mais le flux peut être réorganisé et la position des éléments de bloc peut être modifiée.
Pour contrôler le flux, nous utilisons la propriété float, qui peut placer le bloc à gauche ou à droite. Il suffit d'écrire dans le fichier CSS:
"nom de classe ou de bloc" {float: droite/gauche; }
Le seul inconvénient de float est la possibilité de "chevaucher" un bloc au-dessus d'un autre.
Pour éviter de déborder, nous utilisons clear: both - cette propriété définira le flux autour du bloc. Nous définissons la largeur et la hauteur, comme maximum et minimum, de sorte que la valeur soit formée en fonction de la taille du contenu (texte, images). Marge - définissez la valeur sur auto afin que les marges externes soient formées automatiquement en fonction de l'emplacement du bloc.
Étant donné que le flotteur peut placer des blocs dans deux directions, il est d'usage de diviser le site en ruisseaux - à gauche et à droite. Si le programmeur n'a besoin que de deux flux, il laisse les flottants gauche et droit, mais s'il y en a plus de deux, il ajuste les marges à l'aide de margin. Comment cela peut-il arriver:
.column1 {flotteur: gauche; largeur: 65px; hauteur minimale: 50px; marge droite: 9px; // 9px de la boîte centrale}
2 flux:
.column2 {flotteur: gauche; // au bloc de gauche, mais sans "chevauchement", puisque nous avons appliqué la largeur de la marge: 80px; min-hauteur: 50px; }
3 flux:
.column3 {flotteur: à droite; largeur: 65px; hauteur minimale: 50px; }
Traiter le pied de page (.footer):
.footer {effacer: les deux; // enrouler les deux côtés}
C'est ainsi que nous avons réalisé une grille pour le site à l'aide de float, constituée de trois flux.
