CSS-এ ফ্লোটিং এলিমেন্টগুলির ট্যাগ ভেদ করে প্রবেশ

ধরুন এখন আপনার টেক্সটটি প্যারাগ্রাফে রয়েছে, এবং একটি ছবি, যেটিতে float বৈশিষ্ট্য দেওয়া হয়েছে, সেটি এই প্যারাগ্রাফগুলির উপরে অবস্থিত। এই ক্ষেত্রে সবকিছু ঠিক তেমনই কাজ করবে, যেমনটি আগে করত - অন্যান্য ট্যাগের উপস্থিতি ফ্লো হতে বাধা দেয় না:

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

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

ধরুন এখন প্রথম প্যারাগ্রাফে খুব কম টেক্সট আছে - এই ক্ষেত্রে ছবিটি দ্বিতীয় প্যারাগ্রাফেও প্রবেশ করবে:

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

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