Comprendre la propriété d'effacement CSS

le clair La propriété CSS fait partie de CSS depuis CSS1. Il vous permet de spécifier quels éléments peuvent flotter à côté de l'élément désactivé et de quel côté. le clair propriété a cinq valeurs possibles:

• aucun
• la gauche
• droite
• tous les deux
• hériter

Comment utiliser la propriété CSS clear

Le moyen le plus courant d’utiliser le clair la propriété est après que vous avez utilisé un flotte propriété sur un élément. Par exemple:

• Texte à côté de mon image.
• Texte qui est en dessous de mon image.

Tous les éléments par défaut clair: aucun;donc si vous ne voulez pas que d’autres éléments flottent à côté de quelque chose, vous devez changer le clair style.

Lorsque vous nettoyez des flotteurs, vous faites correspondre votre clair à votre flotteur. Donc, si vous avez flotté l'élément à gauche, vous devez effacer à gauche. Votre élément flottant continuera à flotter, mais l'élément supprimé et tout ce qui va suivre apparaîtra en dessous de celui-ci sur la page Web.

Si vous avez des éléments flottants à droite et à gauche, vous pouvez effacer un seul côté ou vous pouvez effacer tous les deux.

Utilisation de clear dans Layouts

La manière la plus courante utilisée par la plupart des concepteurs clair propriété est dans la disposition des éléments de la page. Vous pouvez avoir une image flottant à l'intérieur d'un bloc de texte et souhaiter que le paragraphe suivant commence sous l'image, ou une colonne entière de texte que vous souhaitez placer à côté d'un autre groupe de texte, avec du texte apparaissant en dessous.

Voici le code HTML pour une mise en page dans ce formulaire. Il a un conteneur div contenant un autre qui flotte à gauche.

Une courte div flotté

Le contenu à l'intérieur du conteneur div va être à droite du div flotté.

Cela fonctionnera très bien, avec la div plus courte flottant à gauche du reste du contenu de la div principale.

Vous pouvez effacer le texte en regard de la zone flottante en ajoutant simplement une balise à l'endroit où vous souhaitez commencer à écrire sous la zone flottante.

Mais le problème survient lorsque la boîte flottante est plus longue que son contenu. Ensuite, comme vous pouvez le constater, la couleur d’arrière-plan de la zone principale n’est pas reportée au bas de la zone flottante.

Heureusement, il existe un moyen facile de résoudre ce problème: la propriété. En configurant la boîte principale sur débordement: auto; la couleur d'arrière-plan reste au bas de la zone flottante la plus longue, comme illustré dans cet exemple.