Tekst w rodzicu floatów w CSS

Usuńmy właściwość height dla diva i umieśćmy krótki tekst przed obrazkiem.

W tym przypadku wysokość naszego diva będzie równa wysokości tekstu, a obrazek nadal wystanie poza div:

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

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

Результат:

Umieśćmy tekst po obrazku - wynik się nie zmieni:

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

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

Результат:

Sprawmy, aby obrazek był wypozycjonowany po lewej stronie - wynik będzie analogiczny:

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

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

Результат:

Dodajmy na dole jeszcze jeden div - obrazek nachodzi na niego:

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

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

Результат:

Jeśli jednak w pierwszym divie dodamy tak dużo tekstu, że jego wysokość będzie większa niż obrazka - nie będzie on nachodzić na drugi div:

html<div>
  <img src="img.png" alt="">
  some long text
</div>
<div>
  tekst
</div>

cssdiv {
  text-align: justify;
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

Ten moment jest bardzo ważny - podczas rozwoju może się zdarzyć, że w jakimś bloku masz wystarczająco dużo tekstu, a potem przy rzeczywistej pracy strony w tym bloku będzie mniej tekstu niż zaplanowano. Okaże się, że w tym przypadku ujawni się problem z nachodzeniem elementów pływających na sąsiednie bloki.