clear প্রপার্টি

clear প্রপার্টিটি float প্রপার্টি দ্বারা নির্ধারিত একটি এলিমেন্টকে অন্য এলিমেন্ট দ্বারা ঘিরে থাকা বাতিল করে। এটি নিম্নলিখিত মানগুলি নিতে পারে: none (নিজের ক্রিয়াকে বাতিল করে), both (একই সাথে ডান এবং বাম উভয় দিক থেকে float বাতিল করে), left (বাম দিক থেকে float বাতিল করে), right (ডান দিক থেকে float বাতিল করে)।

সিনট্যাক্স

সিলেক্টর {
	clear: none বা left বা right বা both
}

উদাহরণ

আসুন বাম দিক থেকে ছবিকে টেক্সট দ্বারা ঘিরে থাকা বাতিল করি:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট
		টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট
		টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট
		টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট
	</p>
</div>

.image {
	float: left;
	padding-right: 10px;
}
.txt {
	clear: left;
}

উদাহরণ

এখন আসুন ডান দিক থেকে ছবিকে টেক্সট দ্বারা ঘিরে থাকা বাতিল করি:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট
		টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট
		টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট
		টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: right;
}

উদাহরণ

আসুন clear প্রপার্টির নিজের ক্রিয়া বাতিল করি:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট
		টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট
		টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট
		টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট টেক্সট
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: none;
}

আরও দেখুন

bottom প্রপার্টি,
যা একটি এলিমেন্টের নীচের প্রান্তের অবস্থান নির্ধারণ করে
top প্রপার্টি,
যা একটি এলিমেন্টের উপরের প্রান্তের অবস্থান নির্ধারণ করে
left প্রপার্টি,
যা একটি এলিমেন্টের বাম প্রান্তের অবস্থান নির্ধারণ করে
right প্রপার্টি,
যা একটি এলিমেন্টের ডান প্রান্তের অবস্থান নির্ধারণ করে
::backdrop সিউডোএলিমেন্ট,
যা প্রথম এলিমেন্টের পরে অবস্থান নির্ধারণ করে
caption-side প্রপার্টি,
যা একটি টেবিলের শিরোনামের অবস্থান নির্ধারণ করে