Tableau des cours

Tutoriels avancés CSS

• Livre de cours CSS
• Introduction au CSS
• Grammaire de base du CSS
• Grammaire avancée du CSS
• Sélecteurs dérivés CSS
• Sélecteurs id CSS
• Sélecteurs de classe CSS
• Création de CSS
• Arrière-plan CSS
• Texte CSS
• Polices CSS
• Listes CSS

Modèle de boîte CSS

• Vue d'ensemble du modèle de boîte CSS
• Marge interne CSS
• Bordure CSS
• Marge externe CSS
• Fusion des marges externes CSS

Positionnement CSS

• Vue d'ensemble de la position CSS
• Position relative CSS
• Position absolute CSS
• Flottaison CSS

Sélecteurs CSS

• Sélecteurs d'élément CSS
• Groupement de sélecteurs CSS
• Détails du sélecteur de classe CSS
• Détails du sélecteur id CSS
• Détails du sélecteur d'attribut CSS
• Sélecteurs descendants CSS
• Sélecteurs d'enfant CSS
• Sélecteurs de frère adjacent CSS

Cours optionnels

Recommandation de cours：

• Bourse à outils CodeW3C.com

Les cadres flottants peuvent se déplacer vers la gauche ou vers la droite jusqu'à ce que leur bord externe touche le bord du conteneur ou d'un autre cadre flottant.

Comme le cadre flottant n'est pas dans le flux normal du document, le comportement des blocs du flux normal du document semble être comme si le cadre flottant n'existe pas.

Flottaison CSS

Voyons l'image suivante, lorsque le cadre 1 flotte vers la droite, il s'éloigne du flux de document et se déplace vers la droite jusqu'à ce que son bord droit touche le bord droit du conteneur：

Voyons l'image suivante, lorsque le cadre 1 flotte vers la gauche, il s'éloigne du flux de document et se déplace vers la gauche jusqu'à ce que son bord gauche touche le bord gauche du conteneur. Comme il n'est plus dans le flux de document, il ne占据空间，en fait il couvre le cadre 2, rendant le cadre 2 invisible dans la vue.

Si les trois cadres sont déplacés vers la gauche, le cadre 1 flotte vers la gauche jusqu'à ce qu'il touche le conteneur, et les deux autres cadres flottent vers la gauche jusqu'à ce qu'ils touchent le cadre flottant précédent.

Comme illustré dans l'image suivante, si le conteneur est trop étroit pour容纳水平排列的三个浮动元素， alors d'autres blocs flottants déplacent vers le bas jusqu'à ce qu'il y ait suffisamment d'espace. Si les éléments flottants ont des hauteurs différentes, ils peuvent être bloqués par d'autres éléments flottants lors de leur déplacement vers le bas：

Propriété float CSS

Dans CSS, nous réalisons le flot des éléments par la propriété float.

Pour plus d'informations sur la propriété float, veuillez consulter le manuel de référence：Propriété float CSS。

Le conteneur de ligne et le nettoyage

Le conteneur de ligne à côté du cadre flottant est raccourci, laissant ainsi de la place pour le cadre flottant, et le conteneur de ligne flotte autour du cadre flottant.

Par conséquent, créer un cadre flottant permet de faire le texte autour de l'image：

Pour empêcher le conteneur de ligne de flottaison autour du cadre浮动框，il faut appliquer ce cadre L'attribut clear. L'attribut clear peut être left, right, both ou none, ce qui indique quels côtés de la boîte ne devraient pas toucher la boîte flottante.

Pour réaliser cet effet, dans l'élément à nettoyer,Marge extérieure supérieureAjouter suffisamment d'espace en haut pour que le bord supérieur de l'élément descende verticalement sous le cadre flottant :

C'est un outil utile qui laisse de la place autour de l'élément flottant.

Laissez-nous examiner plus en détail le flottant et le nettoyage. Supposons que vous souhaitez faire flotter une image à gauche d'un bloc de texte, et que vous souhaitez que cette image et ce texte soient inclus dans un autre élément avec une couleur de fond et une bordure. Vous pourriez écrire le code suivant :

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Dans ce cas, un problème est apparu. Parce que l'élément flottant s'est détaché du flux de document, le div qui enveloppe l'image et le texte ne prend pas de place.

Comment faire en sorte que l'élément enveloppe visuellement l'élément flottant ? Il faut appliquer clear à un endroit de cet élément :

Malheureusement, un nouveau problème est apparu, car il n'y a pas d'éléments existants pour appliquer le nettoyage, nous devons donc ajouter un élément vide et le nettoyer.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

Cela peut réaliser l'effet que nous souhaitons, mais il faut ajouter du code supplémentaire. Souvent, il est possible d'appliquer clear à des éléments, mais parfois, il faut ajouter des balises inutiles pour le layout.

Cependant, nous avons une autre méthode, c'est de flotté le div de conteneur :

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Cela donnera l'effet que nous souhaitons. Malheureusement, l'élément suivant sera affecté par cet élément flottant. Pour résoudre ce problème, certains choisissent de flotté tout le contenu du layout, puis d'utiliser des éléments significatifs (souvent le pied de page du site) pour nettoyer ces flottants. Cela aide à réduire ou à éliminer les balises inutiles.

En réalité, toutes les pages du site CodeW3C.com utilisent cette technologie. Si vous ouvrez le fichier CSS que nous utilisons, vous verrez que nous avons nettoyé le div de pied de page, et les trois div au-dessus du pied de page flottent à gauche.

Propriété clear CSS

Nous avons discuté en détail tout à l'heure du principe de fonctionnement de la nettoyage CSS et des méthodes d'application de l'attribut clear. Si vous souhaitez en savoir plus sur l'attribut clear, veuillez consulter le manuel de référence :Propriété clear CSS。

Boîte à outils

Manuel de référence CSS

Exemples CSS

Tests CSS

Tutoriels CSS

Liens de sponsors