একটি ক্লিয়ারফিক্স কি?

ক্লিয়ারফিক্স প্রপার্টি ব্যবহার করে স্বয়ংক্রিয়ভাবে চাইল্ড এলিমেন্ট অনুযায়ী প্যারেন্ট এলিমেন্ট অ্যাডজাস্ট করতে পারে এবং কিছু অ্যাট্রিবিউটের মাধ্যমে একটি HTML কোডের সমস্যা সমাধান করতে পারে যেমন “ উপচে পড়া ” যা অতিরিক্ত মার্কআপের প্রয়োজন ছাড়াই পিতামাতা এবং শিশু উপাদানগুলির মাত্রা নিয়ন্ত্রণ করে৷

Clearfix সম্পত্তি ব্যবহার

একটি HTML কোড স্নিপেটে একটি CSS clearfix প্রপার্টি যোগ করে আউটপুটে কী করে তা জানতে একটি ক্লিয়ারফিক্স প্রপার্টির ব্যবহার বুঝুন:

ক্লিয়ারফিক্স সম্পত্তি ছাড়া

ক্লিয়ারফিক্স যে ধরনের সমস্যাগুলি সমাধান করতে সক্ষম তা বোঝার জন্য ক্লিয়ারফিক্স প্রপার্টি কার্যকর না করে একটি কোড স্নিপেট চালাই:

HTML এ একটি ক্লাস তৈরি করুন যা একটি div কন্টেইনারে একটি চিত্র সন্নিবেশিত করে:

উপরের HTML এর জন্য CSS কোড নিচে দেওয়া হল:

এটি এমনভাবে আউটপুট তৈরি করবে যাতে শিশু শ্রেণিতে চিত্রটি ধারণ করে কন্টেইনারের বাইরে উপচে পড়বে। এই ধরনের পরিস্থিতিতে, পরিষ্কার ফিক্স বৈশিষ্ট্যটি সহজেই এই সমস্যাটি পরিষ্কার বা সমাধান করতে ব্যবহার করা যেতে পারে:

ক্লিয়ারফিক্স প্রপার্টি সহ

সমস্যা সমাধানের জন্য, আমরা সহজভাবে একটি যোগ করতে পারি উপচে পড়া এর সমান মান সহ বৈশিষ্ট্য স্বয়ংক্রিয় যা চাইল্ড এলিমেন্টের আকার অনুযায়ী প্যারেন্ট কন্টেইনারকে সামঞ্জস্য করবে:

এখানে এই কোড স্নিপেটে, প্যারেন্ট ক্লাস হল ধারক এবং ইমেজটি তার চাইল্ড ক্লাসে ঢোকানো হয়েছে:

একটি ক্লিয়ারফিক্স প্রপার্টি যোগ করা হলে প্যারেন্ট এলিমেন্ট (ধারক) স্বয়ংক্রিয়ভাবে প্রসারিত হবে চাইল্ড এলিমেন্টের সাইজ অনুযায়ী যা ইমেজ ঢোকানো হয়েছে:

এইচটিএমএল-এ একটি ক্লিয়ারফিক্স সম্পত্তি এইভাবে কাজ করে।

উপসংহার

একটি ক্লিয়ারফিক্স প্রপার্টি অতিরিক্ত মার্কআপের প্রয়োজন ছাড়াই একটি সাধারণ ক্লিয়ারফিক্স প্রপার্টি সহ প্যারেন্ট এলিমেন্ট অনুযায়ী HTML এ চাইল্ড উপাদানগুলিকে সামঞ্জস্য করতে ব্যবহৃত হয়। CSS Clearfix ব্যবহার করলে মূল উপাদানের মাত্রা বাড়ে বা হ্রাস পায় যাতে শিশু উপাদানের মাত্রা অনুযায়ী সামঞ্জস্য করা যায়।