सीएसएस में टैग के माध्यम से फ्लोटिंग तत्वों का प्रवेश

अब मान लीजिए कि हमारा टेक्स्ट पैराग्राफ में रखा गया है, और वह छवि, जिसे float गुण दिया गया है, इन पैराग्राफ के ऊपर स्थित है। इस मामले में सब कुछ वैसे ही काम करेगा, जैसे काम कर रहा था - अन्य टैग की उपस्थिति वाउंडिंग में हस्तक्षेप नहीं करती:

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

Результат:

अब मान लीजिए कि पहले पैराग्राफ में टेक्स्ट कम है - इस मामले में छवि दूसरे पैराग्राफ में भी घुसपैठ करेगी:

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

Результат: