Bevezetés a CSS float tulajdonságába

Tegyük fel, hogy van egy div-ünk valamilyen hosszú szöveggel. Helyezzük a szöveg elejére egy képet:

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

cssdiv {
  width: 400px;
  text-align: justify;
}

Результат:

Amint láthatod, a kép alja az első szövegsoron helyezkedik el, a többi része pedig felfelé kerül. A kép jobb oldalán nagy üres tér keletkezik. Tegyük úgy, hogy a szöveg kitölti ezt az üres teret. Ehhez állítsuk a kép float tulajdonságát left értékre:

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

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: left;
}

Результат:

Tehát most a kép balra úszik, a szöveg pedig ennek megfelelően jobbrál folyik körül. Eközben a kép melletti üres tér eltűnt.

A kép nem balra, hanem jobbra is úszhat. Ehhez a float tulajdonságot állítsuk right értékre:

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

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: right;
}

Результат: