CSS ফ্লট

ফ্লোটিং বক্সটি বাম বা ডানে সরতে পারে, পরবর্তীতে তার বাহ্যিক মাঝফালা কনটেন্ট বক্স বা অন্য ফ্লোটিং বক্সের মাঝফালা মাঝফালা সামনে পড়ে তখন থেকে থামে

ফ্লোটিং বক্সটি ডকুমেন্টের সাধারণ স্ট্রিমে না থাকায়, তাই ডকুমেন্টের সাধারণ স্ট্রিমের ব্লক বক্সগুলি ফ্লোটিং বক্সকে না থাকলের মতো দেখায়

CSS ফ্লট

এই চিত্র থেকে দেখা যায়, যখন বক্স ১ ডানে ফ্লোটিং করছে, তখন তা ডকুমেন্ট স্ট্রিম থেকে বেরিয়ে আসে এবং ডানে সরে যায়, পরবর্তীতে তার ডান মাঝফালা কনটেন্ট বক্সের ডান মাঝফালা মাঝফালা সামনে পড়ে তখন

CSS ফ্লটিং ইনস্ট্যান্স - ডানদিকে ফ্লটিং ইলেমেন্ট

এই চিত্র থেকে দেখা যায়, যখন বক্স ১ ডানে ফ্লোটিং করছে, তখন তা ডকুমেন্ট স্ট্রিম থেকে বেরিয়ে আসে এবং ডানে সরে যায়, পরবর্তীতে তার বাম মাঝফালা কনটেন্ট বক্সের বাম মাঝফালা মাঝফালা সামনে পড়ে তখন।কারণ তা ডকুমেন্ট স্ট্রিমে আর নেই, তাই তা জায়গা না নিয়ে, একসঙ্গে বক্স ২-কে আছাড় করে, এবং বক্স ২-কে দৃশ্য থেকে অপসারণ করে

যদি সবগুলো তিনটি বক্সকে ডানে সরিয়ে নিয়ে যাওয়া হয়, তবে বক্স ১ ডানে ফ্লোটিং করবে, যখন তা কনটেন্ট বক্সকে সামনে পড়ে তখন, অন্য দুটি বক্সও ডানে ফ্লোটিং করবে, যখন তারা পূর্ববর্তী ফ্লোটিং বক্সকে সামনে পড়ে তখন

CSS ফ্লটিং ইনস্ট্যান্স - বামদিকে ফ্লটিং ইলেমেন্ট

এই চিত্র থেকে দেখা যায়, যদি কনটেন্ট বক্সটি খুব সবতেকী হোক, যাতে তিনটি ফ্লোটিং এলিমেন্টকে হলভাইজ করা যায় না, তবে অন্যান্য ফ্লোটিং বক্সগুলি নিচে নেমে যাবে, পরবর্তীতে এতটা জায়গা হয় যেতে পারে।যদি ফ্লোটিং এলিমেন্টগুলির উচ্চতা ভিন্ন হোক, তবে তারা নিচে নেমে যাওয়ার সময় অন্যান্য ফ্লোটিং এলিমেন্টকে 'বন্ধন' করতে পারে:

CSS ফ্লটিং ইনস্ট্যান্স 2 - বামদিকে ফ্লটিং ইলেমেন্ট

CSS float এট্রিবিউট

সিএসএস-এ, আমরা এলিমেন্টসকে ফ্লোটিং করতে ফ্লোট এট্রিবিউট ব্যবহার করি

ফ্লোট এট্রিবিউট সম্পর্কে আরও জানতে, পাঠ্যপুস্তকটি দেখুন:CSS float এট্রিবিউট。

লাইন বক্স এবং ক্লিনিং

ফ্লোটিং বক্স পাশের লাইন বক্সকে কমানো হয়, তারপর ফ্লোটিং বক্সকে জায়গা দেওয়া হয়, এবং লাইন বক্সকে ফ্লোটিং বক্স এর চারপাশে ঘুরতে দেওয়া হয়

তাই, ফ্লোটিং বক্স তৈরি করলে, চিত্র এর চারপাশে টেক্সট ঘুরতে পারে:

ফ্লটিং বক্স এর চারপাশে হাইরুট

একটি ফ্লোটিং বক্স এর পাশের একটি লাইন বক্সকে কমানো হয়, তারপর ফ্লোটিং বক্সকে জায়গা দেওয়া হয়, এবং লাইন বক্সকে ফ্লোটিং বক্স এর চারপাশে ঘুরতে দেওয়া হয় clear এটিclear এটি

clear এটির মান হতে পারে left, right, both বা none, যা বক্সটির কোনও শিল্প ফ্লোটিং বক্সের কাছাকাছি থাকবে বলে বোঝায়。এই প্রভাব উপনীত করতে, পরিচ্ছেদকৃত এলিমেন্টেরউপরের বাহ্যিক মার্জিন

clear এট্রিবিউট ইনস্ট্যান্স - হাইরুটকে clear অ্যাপ্লাই করা

এখানে পর্যাপ্ত জায়গা যোগ করুন, যাতে এলিমেন্টটির উপরিমুখ শীর্ষ একটি ফ্লোটিং বক্সের নীচে লক্ষ্য করা যায়:

এটা একটি উপযুক্ত টুল, যা ফ্লোটিং এলিমেন্টের চারপাশের এলিমেন্টকে জায়গা দেয়।

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>কোনও টেক্সট</p>
</div>

এই ক্ষেত্রে, একটি সমস্যা উপস্থিত হয়েছে। কারণ ফ্লোটিং এলিমেন্টটি ডকুমেন্ট স্ট্রিম থেকে বেরিয়ে যায়, তাই ছবি এবং টেক্সটকে বাস্তবায়িত করা ডিভ জায়গা না নিতে পারে。

কিভাবে বাস্তবিকভাবে ফ্লোটিং এলিমেন্টকে বাস্তবিকভাবে বাস্তবায়িত করা যায়? এই এলিমেন্টের কোনও জায়গায় clear প্রয়োগ করতে হবে:

clear এট্রিবিউট ইনস্ট্যান্স - খালি ইলেমেন্টের জন্য পরিষ্কার করা

দুর্ভাগ্যবশত, একটি নতুন সমস্যা উপস্থিত হয়েছে, কারণ কোনও প্রযুক্তি নেই যা clear প্রয়োগ করা যায়, তাই আমরা একটি খালি এলিমেন্ট জোড়া এবং তা সাফি করতে হবে。

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>কোনও টেক্সট</p>
<div class="clear"></div>
</div>

এটা আমাদের চাইতে প্রভাব দেখাবে, কিন্তু অতিরিক্ত কোড জোড়ার প্রয়োজন হবে। কখনও কখনও একটি এলিমেন্টকে clear প্রয়োগ করা যায়, কিন্তু কিছুসময় লেবেলিং করতে অপ্রয়োজনীয় ট্যাগ জোড়ার প্রয়োজন হবে。

কিন্তু আমরা আরও একটি পদ্ধতি আছে, তা হল কনটেনার div-কে ফ্লোট করা:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>কোনও টেক্সট</p>
</div>

এটা আমাদের চাইতে প্রভাব দেখাবে। কিন্তু, আগামী এলিমেন্টটি এই ফ্লোটিং এলিমেন্টের প্রভাব নিতে পারে। এই সমস্যা সমাধান করতে, কিছু লোক সবকিছুকে ফ্লোট করে এবং উপযুক্ত গুরুত্বপূর্ণ এলিমেন্ট (সাধারণত সাইটের পাদটি) ব্যবহার করে ফ্লোটকে সাফি করেছেন। এটা অপ্রয়োজনীয় ট্যাগকে হ্রাস করতে সাহায্য করে。

তথ্যসূত্রে, CodeW3C.com সাইটের সমস্ত পাতা এই প্রযুক্তি ব্যবহার করে। আপনি আমাদের CSS ফাইল খুলে দেখলে, আমরা পাদটিকে ডিভ ক্লিনিং করেছি এবং পাদটির উপরের তিনটি div সবসময় ডানদিকে ফ্লোট করেছে।

CSS clear এট্রিবিউট

আমরা এখনো সমীক্ষা করেছি CSS ক্লিনিং কিভাবে কাজ করে এবং clear এটি কিভাবে প্রয়োগ করা যায়। আপনি একটি আরও বেশি জানতে চান তবে, প্রযুক্তির জন্য পরিচ্ছেদ পুস্তকটি দেখুন:CSS clear এট্রিবিউট。

浮动和清理 实例

float 属性的简单应用
使图像浮动于一个段落的右侧。
হাইরুট ও বর্তন যোগ করে ছবিকে পাশের দিকে ফ্লটিং করা
ছবিকে পাশের দিকে ফ্লটিং করে ছবিতে হাইরুট ও বর্তন যোগ করা
শিরোনাম সহ ছবিকে ডানদিকে ফ্লটিং করা
শিরোনাম সহ ছবিকে ডানদিকে ফ্লটিং করা
প্রথম বাক্যের প্রথম অক্ষরকে বামদিকে ফ্লটিং করা
প্রথম বাক্যের প্রথম অক্ষরকে বামদিকে ফ্লটিং করে এই অক্ষরের জন্য স্টাইল যোগ করা
হোভার মেনু তৈরি করা
একটি সারিতে হাইপারলিঙ্ক সহ ফ্লটিং ব্যবহার করে হোভার মেনু তৈরি করা
সবজাত ট্যাবলেস প্রথম পাতা তৈরি করা
শীর্ষসারিকা, পাদসারিকা, বামদিকের সার্ট এবং মূল বিষয় সামগ্রী সহ প্রথম পাতা তৈরি করতে ফ্লটিং ব্যবহার করা
হাইরুটের পাশের দিক পরিষ্কার করা
এই উদাহরণ দেখায় কিভাবে ফ্লটিং ইলেমেন্টকে হাইরুটের পাশের দিকে ব্যবহার করা যায়。