Éléments flottants tutorial


Comme indiqué précédemment, les éléments de bloc occupent toute la largeur de l'espace autorisé (l'élément enfant), et commencent également par une nouvelle ligne. En outre, tous les éléments après le bloc commencent également par une nouvelle ligne dans la mise en page de la page Web.

Si vous fixez la largeur d'un élément en utilisant la propriété width , alors il est possible de définir le flux autour de cet élément par d'autres. Cette propriété a le nom float , comme il semble que l'élément " плывет "dans l'environnement d'autres éléments - à gauche ou à droite.Ainsi, cette propriété a deux valeurs fondamentales - left ou right . Avec la valeur left l'élément est pressé sur le bord gauche et l'écoulement autour des autres éléments se produit le long de son bord droit. Avec la valeur right - Tout autour. Notez que vous devez définir la largeur de l'élément pour le faire. Aussi float peut faire la différence none - Il est installé par défaut.



Nous voyons que le texte en dehors du bloc est situé à droite de celui-ci. En l'absence d'une règle float:left Ce texte serait placé sous le bloc - en fonction des propriétés des éléments du bloc.

Pour annuler l'enrobage, il suffit d'insérer l'élément avec la règle effacer: les deux après l'élément avec la règle float . Propriété clear Rationaliser la rationalisation pour les éléments indiqués après. Signification both signifie que toute rationalisation - gauche ou droite - sera annulée. Propriété clear peut également prendre des valeurs left ou right - Annuler la même valeur de propriété float . Cette règle est souvent utilisée pour insérer une ligne vide entre deux éléments flottants.



Propriété float a ses propres caractéristiques, ce qui peut conduire à des résultats inattendus. L'un d'eux est la situation suivante. Supposons que nous plaçons un bloc dans un autre et que le bloc interne ait une règle float: left



Nous voyons que l'unité flottante ne retient pas réellement l'unité extérieure et dépasse ses limites. Pour corriger cet effet, vous devez ajouter une règle

overflow: hidden;


par bloc bar :

Проверьте свои знания
Créez des règles de style pour la classe de fleur, sous laquelle l'élément va "nager" vers la droite. Créez les règles de style suivantes pour la balise img dans le bloc de cette classe: height 50px; retrait extérieur à gauche 50px. Utiliser le dessin unité d'insertion avec motif de fleurs dans l'en-tête de sorte qu'il est pressé contre le bord gauche de l'en-tête. L'étiquette de modèle doit être placée dans un bloc de la classe de fleurs. Placez le fichier image dans le dossier img dans la racine du projet. Créez un tag de formulaire. A l'intérieur du bloc formulaire de contact avant que le formulaire pour insérer le texte de titre Formulaire de contact, la couleur du texte # 403E3F.