Que signifie clair en CSS

L'attribut clear en CSS contrôle la relation entre l'élément et les éléments flottants précédents : aucun : non affecté par les éléments flottants ; gauche : effacement des éléments flottants gauche ; droite : effacement des éléments flottants droits ;

signification claire en CSS

clear est une propriété en CSS qui contrôle la relation d'un élément avec l'élément flottant qui le précède. Lorsqu'un élément flotte, il s'éloigne du flux normal du document, permettant aux éléments suivants de circuler au-dessus de lui. L'attribut clear force les éléments suivants à apparaître sous l'élément flottant.

Syntaxe

clear: none | left | right | both;

Valeurs

• aucun : Les éléments ne sont pas affectés par les éléments flottants précédents.
• left : element efface l'élément flottant à gauche.
• right : element efface l'élément flottant à droite.
• both : element efface les éléments flottants sur les côtés gauche et droit.

Exemple

.container {
  width: 100%;
}

.float-left {
  float: left;
  width: 50%;
}

.no-clear {
  clear: none;
}

.left-clear {
  clear: left;
}

.right-clear {
  clear: right;
}

.both-clear {
  clear: both;
}

Effect

• .no-clear n'effacera pas les éléments flottants précédents, .float-left apparaîtra dans .no-clear. <code>.no-clear 不会清除前面的浮动元素，.float-left 将会出现在 .no-clear 的上方。
• .left-clear 会清除左边的浮动元素，.float-left 将会出现在 .left-clear 的上方。
• .right-clear 会清除右边的浮动元素，.float-left 将会出现在 .right-clear 的下方。
• .both-clear 会清除左右两边的浮动元素，.float-left 将会出现在 .both-clear
.left-clear effacera l'élément flottant gauche et .float-left apparaîtra au-dessus de .left-clear.

.right-clear effacera l'élément flottant à droite et .float-left apparaîtra sous .right-clear. .both-clear effacera les éléments flottants à gauche et à droite, et .float-left apparaîtra sous .both-clear.

🎜Usage🎜🎜🎜L'attribut clear est généralement utilisé pour contrôler la disposition et l'ordre des éléments dans une mise en page flottante. Il garantit que le contenu n'est pas couvert ou obscurci par des éléments flottants. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!