Le cadre effondré — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 6)

Le cadre effondré

Positionnement et empilement · niveau 1 (application)

Énoncé

La présentation de la librairie (image flottante à gauche, texte court) a un cadre qui ne contient pas l'image (capture de la section sur les flottants).


*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 16px;
  font-family: system-ui, sans-serif;
}

/* Erreur : le cadre ne contient pas l'image flottante */
.presentation {
  max-width: 560px;
  padding: 8px;
  border: 2px solid #1f3a68;
}

.presentation p {
  margin: 0;
}

.vignette {
  float: left;
  margin: 0 12px 4px 0;
}

Expliquer, corriger, et dire ce qu'il faudrait pour que le paragraphe « suivant » commence sous l'image même sans corriger le cadre.

Corrigé

Le flottant est retiré du flux : le cadre ne compte que le texte court pour sa hauteur (38 pixels selon Chromium), alors que l'image en mesure 110. On ajoute display: flow-root à .presentation :


*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 16px;
  font-family: system-ui, sans-serif;
}

.presentation {
  display: flow-root;
  max-width: 560px;
  padding: 8px;
  border: 2px solid #1f3a68;
}

.presentation p {
  margin: 0;
}

.vignette {
  float: left;
  margin: 0 12px 4px 0;
}

Le cadre englobe alors l'image. Sans corriger le cadre, on pourrait donner clear: both au paragraphe suivant : il commencerait sous l'image, mais le cadre resterait trop court, l'image débordant de sa bordure. flow-root est la bonne correction.