CSS সাজানো - clear ও clearfix
- পূর্ববর্তী পৃষ্ঠা CSS ফ্লোটিং
- পরবর্তী পৃষ্ঠা CSS সাজানো - ভেস্টিং প্রয়োগ
clear প্রতিভূতি
clear প্রতিভূতির প্রতিভূতি নির্ধারণ করে কোনও উপাদানকে কোনও পরিমাপকৃত উপাদানের পাশে ফ্লোটিং করতে পারে এবং কোনও দিকের কোনও ফ্লোটিং উপাদানকে প্রতিবন্ধিত করতে পারে
clear প্রতিভূতির মান নিম্নলিখিত মানগুলোর মধ্যে একটি নির্ধারণ করা যেতে পারে:
- none - উভয় দিকের ফ্লোটিং উপাদানকে অনুমতি দেবে। ডিফল্ট মান
- left - বামদিকের দিকের ফ্লোটিং উপাদানকে প্রতিবন্ধিত করবে
- right - ডানদিকের দিকের ফ্লোটিং উপাদানকে প্রতিবন্ধিত করবে
- both - বাম এবং ডানদিকের দিকের ফ্লোটিং উপাদানকে প্রতিবন্ধিত করবে
- inherit - উপাদানটি তার পিতৃক প্রতিভূতির মান উত্তরাধিকার করবে
ব্যবহার করা হয় clear প্রতিভূতির সবচেয়ে সাধারণ ব্যবহারটি হল উপাদানের উপর float প্রতিভূতির পরে。
ফ্লোটিং পরিমাপ করার সময়, ফ্লোটিং এবং পরিমাপকে মিলিত করা উচিত: যদি কোনও উপাদান বামের দিকে ফ্লোটিং করে, তবে বামকে পরিমাপ করা উচিত। আপনার ফ্লোটিং উপাদানটি প্রচলিতভাবে ফ্লোটিং করবে, কিন্তু পরিমাপকৃত উপাদানটি তার নিচে দেখানো হবে。
নিম্নলিখিত উদাহরণটি ডিভ থেকে বামের দিকের ফ্লোটিংকে পরিমাপ করবে। যার মানে (ডিভ এর) বামের দিকে ফ্লোটিং উপাদান হবে না:
ইনস্ট্যান্স
div {
clear: left;
}
clearfix Hack
যদি একটি উপাদান তার অন্তর্ভুক্ত উপাদানের থেকে উঁচু হয় এবং তা ফ্লোটিং হয়, তবে তা তার কোষাগারের বাইরে 'উপস্থাপনা' করবে:
তারপর আমরা overflow: auto; জুড়ে দিতে পারি, এটা সমস্যা দূর করতে:
ইনস্ট্যান্স
.clearfix {
overflow: auto;
}
যদি আপনি অতিরিক্ত মার্গ ও মার্গকে নিয়ন্ত্রণ করতে পারেন (নিজেই রোলবার দেখতে পারেন), overflow: auto clearfix একটা ভালো কাজ করবে।কিন্তু নতুন আধুনিক clearfix হ্যাক টেকনিক ব্যবহার করে আরও নিরাপদ, নিচের কোডটা অধিকাংশ সাইটে ব্যবহৃত হয়:
ইনস্ট্যান্স
.clearfix::after {
content: "";
clear: both;
display: table;
}
এই অধ্যায়ে আপনি কিছুদিন পরে শিখবেন ::after পসুদো ইলেমেন্ট
- পূর্ববর্তী পৃষ্ঠা CSS ফ্লোটিং
- পরবর্তী পৃষ্ঠা CSS সাজানো - ভেস্টিং প্রয়োগ
