clear প্রপার্টি

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

সিনট্যাক্স

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

উদাহরণ

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

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

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

Результат:

উদাহরণ

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

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

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

Результат:

উদাহরণ

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

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

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

Результат:

আরও দেখুন