Text v rodiči floatů v CSS

Odstraňme vlastnost height pro div a vložme krátký text před obrázek.

V tomto případě bude výška našeho divu rovna výšce textu a obrázek stále vyčnívá z divu:

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

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

Результат:

Přidejme text za obrázek - výsledek se nezmění:

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

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

Результат:

Nastavme, aby obrázek plaval vlevo - výsledek bude analogický:

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

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

Результат:

Přidejme dole další div - obrázek najede i na něj:

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

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

Результат:

Pokud do prvního divu přidáme tolik textu, že jeho výška bude větší než obrázek - nebude najíždět na 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 velmi důležitý - při vývoji může nastat situace, kdy v nějakém bloku máte dostatek textu, ale pak při reálném provozu webu bude v tomto bloku méně textu, než bylo plánováno. Ukáže se, že v tomto případě se projeví problém s najížděním plovoucích prvků na sousední bloky.