Szöveg float szülőelemben CSS-ben

Vegyük ki a height tulajdonságot a div elemről és tegyünk egy rövid szöveget a kép elé.

Ebben az esetben a div magassága egyenlő lesz a szöveg magasságával, és a kép továbbra is kilóg a divből:

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

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

Результат:

Tegyük a szöveget a kép után - az eredmény nem változik:

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

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

Результат:

Most legyen a kép balra floatolva - az eredmény hasonló lesz:

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

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

Результат:

Tegyünk alá egy másik div-et - a kép ráfog nyúlni:

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

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

Результат:

Ha viszont az első div-be annyi szöveget rakunk, hogy magasabb legyen a képnél - akkor nem fog a második div-re rányúlni:

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

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

Результат:

Ez a pont nagyon fontos - fejlesztés közben előfordulhat, hogy egy blokkban sok szöveg van, majd a weboldal valódi működése során ebben a blokkban kevesebb szöveg jelenik meg, mint amennyit terveztek. Így kiderülhet, hogy ebben az esetben megjelenik a probléma a float elemek szomszédos blokkokra nyúlásával.