সিএসএস লেআউট - ফ্লোট ও ক্লিয়ার

সিএসএস লেআউট - ফ্লোট ও ক্লিয়ার

CSS float এই প্রক্রিয়াটি উপাদানকে কীভাবে ফ্লোট করতে বলে

CSS clear এই প্রক্রিয়াটি কোন উপাদানকে কোন উপাদানের পাশে থেকে কোন দিকে ফ্লোট করতে বলে

float প্রক্রিয়া

float এই প্রক্রিয়াটি উপাদানকে স্থানান্তরিত এবং ফরম্যাটিং করার জন্য ব্যবহৃত হয়, যেমন ছবিকে ক্যান্ডের টেক্সটের ডানদিকে ফ্লোট করা

float এই প্রক্রিয়াটি নিম্নলিখিত মান নির্ধারণ করতে পারে:

  • left - উপাদান তার ক্যান্ডের সম্মুখদিকে ফ্লোট করবে
  • right - উপাদান তার ক্যান্ডের ডানদিকে ফ্লোট করবে
  • none - উপাদান ফ্লোট করবে না (টেক্সটের মধ্যে যেখানে সবার প্রথমে দেখা যাবে)।ডিফল্ট মান
  • inherit - উপাদান তার পিতৃদের float মান উত্তরাধিকার করে

সবচেয়ে সহজ ব্যবহারটি হল:float এই প্রক্রিয়াটি (পত্রিকায়) টেক্সটকে ছবির চারপাশে ঘিরে রাখতে পারে。

উদাহরণ - float: right;

এই উদাহরণে ছবি টেক্সটের মধ্যে ডানদিকে ফ্লোট করবে:

পাইন্যাপল

প্রধান ওয়েব টেকনলজি টিউটোরিয়াল - সবকিছু মুফত। CodeW3C.com-এ, আপনি প্রয়োজনীয় সবকিছু ওয়েব নির্মাণ টিউটোরিয়াল পাবেন। প্রাথমিক HTML থেকে CSS পর্যন্ত, এবং অগ্রগতিমূলক XML, SQL, JS, PHP পর্যন্ত।

আমাদের রেফারেন্স ম্যানুয়েল ওয়েব টেকনলজির সবকিছুকে আবৃত করে। এর মধ্যে রয়েছে W3C স্ট্যান্ডার্ড টেকনলজি: HTML, CSS, XML। এছাড়াও, JavaScript, PHP, SQL এবং অন্যান্য টেকনলজি রয়েছে。

CodeW3C.com-এ, আমরা হাজার হাজার ইনস্ট্যান্স প্রদান করি। আমাদের অনলাইন এডিটর ব্যবহার করে, আপনি এই উদাহরণগুলি সম্পাদনা করতে পারেন এবং কোডকে পরীক্ষা করতে পারেন。

ইনস্ট্যান্স

img {
  float: right;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

উদাহরণ - float: left;

এই উদাহরণে ছবি টেক্সটের মধ্যে যেখানে থাকবেডানদিকেফ্লোট:

পাইন্যাপল

প্রধান ওয়েব টেকনলজি টিউটোরিয়াল - সবকিছু মুফত। CodeW3C.com-এ, আপনি প্রয়োজনীয় সবকিছু ওয়েব নির্মাণ টিউটোরিয়াল পাবেন। প্রাথমিক HTML থেকে CSS পর্যন্ত, এবং অগ্রগতিমূলক XML, SQL, JS, PHP পর্যন্ত।

আমাদের রেফারেন্স ম্যানুয়েল ওয়েব টেকনলজির সবকিছুকে আবৃত করে। এর মধ্যে রয়েছে W3C স্ট্যান্ডার্ড টেকনলজি: HTML, CSS, XML। এছাড়াও, JavaScript, PHP, SQL এবং অন্যান্য টেকনলজি রয়েছে。

CodeW3C.com-এ, আমরা হাজার হাজার ইনস্ট্যান্স প্রদান করি। আমাদের অনলাইন এডিটর ব্যবহার করে, আপনি এই উদাহরণগুলি সম্পাদনা করতে পারেন এবং কোডকে পরীক্ষা করতে পারেন。

ইনস্ট্যান্স

img {
  float: left;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

উদাহরণ - নো ফ্লোট

এই উদাহরণে, ছবি টেক্সটের মধ্যে যেখানে সবার প্রথমে দেখা যাবে (float: none;):

পাইন্যাপল প্রধান ওয়েব টেকনলজি টিউটোরিয়াল - সবকিছু মুফত। CodeW3C.com-এ, আপনি প্রয়োজনীয় সবকিছু ওয়েব নির্মাণ টিউটোরিয়াল পাবেন। প্রাথমিক HTML থেকে CSS পর্যন্ত, এবং অগ্রগতিমূলক XML, SQL, JS, PHP পর্যন্ত। আমাদের রেফারেন্স ম্যানুয়েল ওয়েব টেকনলজির সবকিছুকে আবৃত করে। এর মধ্যে রয়েছে W3C স্ট্যান্ডার্ড টেকনলজি: HTML, CSS, XML। এছাড়াও, JavaScript, PHP, SQL এবং অন্যান্য টেকনলজি রয়েছে。 CodeW3C.com-এ, আমরা হাজার হাজার ইনস্ট্যান্স প্রদান করি। আমাদের অনলাইন এডিটর ব্যবহার করে, আপনি এই উদাহরণগুলি সম্পাদনা করতে পারেন এবং কোডকে পরীক্ষা করতে পারেন。

ইনস্ট্যান্স

img {
  float: none;
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

সম্প্রসারিত পড়া

অতিরিক্ত বইঃCSS ফ্লোট