CSS Float, claire et déborde des propriétés | Expliqué

Le positionnement des éléments HTML dans les endroits appropriés est très significatif lors de la conception de la disposition d'un site Web. CSS fournit plusieurs propriétés de positionnement qui aident les développeurs à mieux structurer la position des éléments HTML.

En plus de cela, pendant le développement du site Web, nous rencontrons souvent certaines circonstances où le contenu présent dans certains éléments HTML déborde. Afin de gérer ces situations, CSS fournit également certaines propriétés.

Dans ce guide, vous passerez par les propriétés CSS suivantes.

1. Propriété flottante
2. Propriété claire
3. Propriété de débordement

Commençons.

Propriété flottante

La propriété Float est appelée une propriété de positionnement utilisée pour positionner le contenu et structurer la disposition d'un site Web. Cette propriété positionne un élément de telle manière que d'autres éléments s'enroulent autour.

Syntaxe

float: valeur;

Comme d'autres propriétés CSS, la propriété Float rend certaines valeurs qui sont énumérées ci-dessous.

Valeur	Description
aucun	Il s'agit d'une valeur par défaut qui empêche un élément de flotter et affiche l'élément où il existe dans le texte.
gauche	Pour flotter un élément à gauche, cette valeur est utilisée.
droite	Pour flotter un élément vers la droite, cette valeur est utilisée.
initial	Pour attribuer la valeur d'origine à la propriété, cette valeur est utilisée.
hériter	Pour hériter de cette propriété à partir de sa propriété parentale, cette valeur est utilisée.

Voici quelques exemples de la propriété Float.

Exemple 1
Supposons que vous affichez du texte sur votre site Web et que vous souhaitez ajouter une image pertinente sur le côté droit du texte. Utilisez l'extrait de code suivant.

Html

Les chiens sont des créatures extrêmement fidèles. Ils sont mignons, ludiques et sont le meilleur ami d'un homme. Il y a plusieurs races de chiens. Certaines des races de chiens sont Bull Dog, Siberian Husky, Golden Retriever et bien d'autres.

CSS

img
Flotter à droite;
Largeur: 190px;
hauteur: 170px;

Dans l'exemple ci-dessus, nous avons écrit du texte sur les chiens et flotté l'image du chien sur le côté droit. Voici la sortie.

Image du chien flottait à droite avec succès.

Si dans le même exemple, la propriété flottante est définie sur «aucune» au lieu de «droite», l'image du chien sera affichée où elle se produit dans le texte. Voici à quoi ça ressemblera.

Exemple 2
Parfois, pour ajouter de la beauté au texte apparaissant sur le site Web, vous utilisez différentes familles de polices et tailles. En outre, flottant le texte à une position appropriée est également assez important. Cet exemple montre comment faire flotter une lettre dans un paragraphe.

Html

DLes OG sont des créatures extrêmement fidèles. Ils sont mignons, ludiques et sont le meilleur ami d'un homme. Il y a plusieurs
races de chiens. Certaines des races de chiens sont Bull Dog, Siberian Husky, Golden Retriever et bien d'autres. Si vous traversez
dépression ou une certaine mauvaise phase de vie, caressant un chien est fortement suggéré. En plus de ces chiens sont également utilisés pour la sécurité
objectifs.

CSS

portée
flottant: à gauche;
Largeur: 0.8EM;
hauteur de ligne: 90%;
taille de police: 60px;
Police-poids: Bold;
Font-Family: Times New Roman;

Dans l'exemple ci-dessus, nous flottons la première lettre du texte à gauche et lui donnons un certain style. La sortie est indiquée ci-dessous.

La première lettre flottait sur la gauche avec succès.

Maintenant que nous avons compris la propriété CSS Float, découvrons la propriété CSS Clear.

Propriété claire

La propriété claire est également une propriété de positionnement qui gère les éléments qui sont à côté des éléments qui sont flottés.

Si vous attribuez une propriété claire à un élément dans la même direction que le flotteur, il sera poussé sous les éléments flottants, sinon, s'il y a suffisamment d'espace, l'élément s'adaptera à côté de l'élément flottant horizontalement.

Syntaxe

Clear: valeur;

La propriété claire présente certaines valeurs qui sont expliquées ci-dessous.

Valeur	Description
aucun	Il s'agit d'une valeur par défaut qui empêche les éléments flottants de nettoyer.
gauche	Cette valeur positionne les éléments à gauche des éléments flottants.
droite	Cette valeur positionne les éléments à droite des éléments flottants.
les deux	Cette valeur positionne les éléments à la fois à gauche et à droite des éléments flottants.
initial	Cette valeur attribue à la propriété sa valeur d'origine.
hériter	Pour hériter de cette propriété à partir de sa propriété parentale, cette valeur est utilisée.

Explorons davantage la propriété claire à l'aide d'exemples appropriés.

Exemple 1
Nous apprendrons comment fonctionne la propriété claire en utilisant l'exemple de chien mentionné dans la section ci-dessus.

Html

Les chiens sont des créatures extrêmement fidèles. Ils sont mignons, ludiques et sont le meilleur ami d'un homme. Il y a plusieurs races de chiens. Certaines des races de chiens sont Bull Dog, Siberian Husky, Golden Retriever et bien d'autres.

CSS

img
flottant: à gauche;
Largeur: 170px;
hauteur: 170px;

Maintenant dans l'exemple ci-dessus, il y a deux éléments qui sont

et . Cependant, seul est flotté vers la gauche. Maintenant, afin de comprendre comment fonctionne la propriété claire, nous appliquerons clairement

élément. Utilisez l'extrait de code suivant.

p.clair
Clear: à gauche;

Ici, nous nous sommes clairement appliqués au

dans le même sens que le flotteur.

Sortir
Avant d'appliquer Clear.

Après avoir appliqué Clear.

Le texte a été effacé à la gauche à gauche de l'image flottante.

Vous pouvez utiliser d'autres valeurs de la propriété claire en utilisant l'exemple ci-dessus pour voir comment ils fonctionnent.

Propriété de débordement

La propriété Overflow contrôle le comportement du contenu qui déborde la zone spécifiée d'un élément, en outre, la propriété de débordement est conçue pour les éléments au niveau des blocs uniquement.

Syntaxe

débordement: valeur;

Différentes valeurs de la propriété de débordement sont fournies ci-dessous:

Valeur	Description
visible	Il s'agit d'une valeur par défaut et il affichera tout le contenu qui dépasse la zone spécifiée de l'élément.
caché	Cette valeur cache tout le contenu qui dépasse la zone spécifiée de l'élément.
faire défiler	Cette valeur cache le contenu qui dépasse la zone de l'élément à l'intérieur et fournit des barres de défilement verticales et horizontales pour afficher le contenu.
auto	Cette valeur ajoute une barre de défilement uniquement en cas de besoin.
initial	Cette valeur attribue à la propriété sa valeur d'origine.
hériter	Pour hériter de cette propriété à partir de sa propriété parentale, cette valeur est utilisée.

Maintenant, pour une meilleure compréhension de cette propriété, nous allons considérer un exemple et à travers cela, nous démontrerons différentes valeurs de la propriété de débordement.

Exemple.

Dans cet exemple, nous allons créer un et placer du contenu à l'intérieur et voir comment les valeurs de propriété de débordement différentes fonctionnent.

Html

La propriété Overflow contrôle le comportement du contenu qui déborde la zone spécifiée d'un élément, en outre, la propriété de débordement est conçue pour les éléments au niveau des blocs uniquement.

Illustrons d'abord la valeur visible de la propriété de débordement.

CSS

.div1
débordement: visible;
Color en arrière-plan: Rosybrown;
Largeur: 100px;
Hauteur: 145px;
Border: 2px noir solide;

Sortir

En utilisant la valeur visible de la propriété de débordement, le contenu est affiché à l'extérieur de la zone.

Nous allons maintenant illustrer la valeur cachée de la propriété de débordement. Voici l'extrait de code.

.div1
débordement caché;

Sortir

Le contenu dépassant la zone de la boîte est caché.

L'extrait de code pour la valeur de défilement de la propriété Overflow est le suivant.

.div1
débordement: défilement;

Sortir

À l'aide des barres de défilement, le reste du contenu peut être affiché.

Et maintenant, nous verrons comment fonctionne la valeur automatique de la propriété de débordement.

.div1
débordement: auto;

Sortir

Selon l'exigence, la valeur automatique n'a ajouté que la barre de défilement verticale.

En utilisant la valeur automatique, le contenu débordant est caché à l'intérieur de la boîte avec succès.

Conclusion

Le propriété flottante est utilisé dans le positionnement du contenu et la structuration de la disposition d'un site Web, en outre, cette propriété positionne un élément de telle manière que d'autres éléments s'enroulent autour. Le propriété claire, D'un autre côté, gère les éléments qui sont à côté des éléments qui sont flottés. En attendant, le Propriété de débordement contrôle le comportement du contenu qui déborde la zone spécifiée d'un élément. Toutes ces propriétés présentent certaines valeurs qui effectuent des actions différentes sur ces propriétés. Ces propriétés et leurs valeurs sont expliquées en profondeur avec l'aide d'exemples dans cet article.