CSS में टैग के नीचे फ्लोटिंग एलिमेंट्स

मान लीजिए कि अभी हमारे पास दो पैराग्राफ और एक इमेज है, जो पहले पैराग्राफ में रखी गई है। मान लीजिए कि इस इमेज के लिए हमने float प्रॉपर्टी सेट की है right वैल्यू पर, और साथ ही इसे थोड़ा पारदर्शी (opacity) भी बनाया है:

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

div {
	border: 1px solid red;
	text-align: justify;
}
p {
	border: 1px solid green;
}
img {
	float: right;
	opacity: 0.5;
}

और अब आइए HTML कोड में इमेज को पहले पैराग्राफ के बाद रखें और देखें कि क्या होता है:

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

div {
	border: 1px solid red;
	text-align: justify;
}
p {
	border: 1px solid green;
}
img {
	float: right;
	opacity: 0.5;
}

जैसा कि हम देख सकते हैं, इमेज के चारों ओर दूसरे पैराग्राफ का टेक्स्ट फ्लो हो रहा है, लेकिन पहले का नहीं।

आइए हमारी इमेज को दूसरे पैराग्राफ के बाद रख दें। इस स्थिति में यह दाईं ओर फ्लोट करेगी, लेकिन कोई भी टेक्स्ट उसके चारों ओर फ्लो नहीं करेगा:

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

div {
	border: 1px solid red;
	text-align: justify;
}
p {
	border: 1px solid green;
}
img {
	float: right;
	opacity: 0.5;
}

इस प्रकार, यह पता चलता है कि इमेज के चारों ओर केवल वही एलिमेंट्स फ्लो करेंगे जो उसके बाद आते हैं, न कि वे जो उससे पहले आते हैं।