CSS'de Float Öğelerin Etiketler Arasında Geçişi

Şimdi metnimizin paragraflar içinde yer aldığını, ve float özelliği verilmiş bir resmin bu paragrafların üzerinde bulunduğunu varsayalım. Bu durumda her şey, daha önce çalıştığı gibi çalışacaktır - diğer etiketlerin varlığı kaydırma işlemini engellemez:

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

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

Результат:

Şimdi ilk paragrafta az metin olduğunu varsayalım - bu durumda resim ikinci paragrafın alanına da taşacaktır:

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

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

Результат: