Effekten av floats på föräldern i CSS

Låt oss nu anta att vi har en div som innehåller en bild. Vi sätter en kantlinje på diven, men sätter ännu inte egenskapen float på bilden.

Låt oss se hur det kommer att se ut i webbläsaren:

html<div>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}

Результат:

Nu sätter vi egenskapen float på bilden med värdet left. I det här fallet kommer något märkligt att hända - förälderns höjd försvinner, dess nedre kantlinje kommer att börja omedelbart efter den övre, och bilden kommer att sticka ut under sin förälder:

html<div>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

Det visar sig att element som har satts egenskapen float, utökar inte sin förälders höjd.

Låt oss ändra egenskapen float från left till värdet right. Förälderns beteende förändras inte, men bilden kommer att börja flyta till höger:

html<div>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат: