Text v rodičovi floatov v CSS

Odstráňme vlastnosť height pre div a vložme krátky text pred obrázok.

V tomto prípade bude výška nášho divu rovná výške textu a obrázok bude stále vyčnievať mimo div:

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

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

Результат:

Pridajme text za obrázok - výsledok sa nezmení:

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

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

Результат:

Nastavme, aby obrázok plával vľavo - výsledok bude analogický:

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

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

Результат:

Pridajme dole ďalší div - obrázok naň prekryje:

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

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

Результат:

Ak do prvého divu pridáme toľko textu, že jeho výška bude väčšia ako obrázka - nebude prekryvať druhý div:

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

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

Результат:

Tento moment je veľmi dôležitý - pri vývoji môže nastať situácia, že v nejakom bloku máte dosť veľa textu, no potom pri reálnom behu stránky bude v tomto bloku menej textu, ako bolo plánované. Ukáže sa, že v tomto prípade sa prejaví problém s prekryvaním plávajúcich elementov na susedné bloky.