Тэкст у бацьку флоатаў у CSS

Давайце прыбяром уласцівасць height для дзіва і паставім невялікі тэкст пера карцінкай.

У гэтым выпадку вышыня нашага дзіва будзе роўная вышыні тэксту, а карцінка па-ранейшаму вылезе за дзів:

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

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

Результат:

Давайце паставім тэкст пасля карцінкі - вынік не зменіцца:

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

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

Результат:

Давайце зробім так, каб карцінка плавала па левым краі - вынік будзе аналагічным:

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

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

Результат:

Давайце знізу дадамо яшчэ адзін дзів - карцінка налезе і на яго:

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

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

Результат:

Калі ж у першы дзів дадаць настолькі многа тэксту, што па вышыні ён будзе больш карцінкі - яна не будзе налезаць на другі дзів:

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;
}

Результат:

Гэты момант вельмі важны - пры распрацоўцы можа быць такое, што ў якім-сі блоку ў вас дастаткова многа тэксту, а затым пры рэальнай працы сайта ў гэтым блоку будзе менш тэксту, чым запланавана. Атрымаецца, што ў гэтым выпадку праявіцца праблема з налезаннем плаваючых элементаў на суседнія блокі.