Comment utiliser l'attribut clear-tutoriel CSS-php.cn

Comment utiliser l'attribut clear

青灯夜游

Libérer： 2019-02-15 14:14:45

original

4940 Les gens l'ont consulté

L'attribut

clear définit l'élément sur le côté gauche ou droit de l'élément pour qu'il ne flotte pas. Il peut être utilisé pour effacer les flottants et résoudre certains problèmes causés par la disposition flottante.

Comment utiliser l'attribut clear

Attribut CSS clear

Fonction : L'attribut clear peut définir si les éléments de gauche et les côtés droits de l'élément flottant sont flottants.

Syntaxe :

clear：none | left | right | both;

Copier après la connexion

aucune : valeur par défaut. Permet aux éléments flottants d'apparaître des deux côtés.

gauche : Aucun élément flottant n'est autorisé sur le côté gauche.

droite : aucun élément flottant n'est autorisé sur le côté droit.

les deux : les éléments ne sont pas autorisés à flotter ni du côté gauche ni du côté droit.

Exemple d'utilisation de l'attribut CSS clear

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div2 {
  border: 1px solid red;
}
.div3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div4 {
  border: 1px solid red;
  clear: left;
}
</style>
</head>
<body>
<h2>不使用clear清除浮动</h2>
<div class="div1">div1</div>
<div class="div2">div2 - 测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</div>
<p>注意，在HTML代码中，div2在div1之后。但是，由于div1向左浮动，所以div2中的文本围绕div1流动。</p>
<br><br>
<h2>使用clear清除浮动</h2>
<div class="div3">div3</div>
<div class="div4">div4 - 测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！ </div>
<p>
说明：使用clear: left;将div4向下移动到浮动div3下面；值“Left”清除浮动到左侧的元素。我们还可以使用clear属性的“right”和“both”值。</p>
</body>
</html>

Copier après la connexion

Rendu :

Comment utiliser lattribut clear

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!