উত্পাদিত নকশার উপর নির্ভর করে, নীচের প্রতিটি ক্লিয়ারফিক্স সিএসএস সমাধানগুলির নিজস্ব সুবিধা রয়েছে।
ক্লিয়ারফিক্সে দরকারী অ্যাপ্লিকেশন রয়েছে তবে এটি হ্যাক হিসাবেও ব্যবহৃত হয়েছে। আপনি একটি ক্লিয়ারফিক্স ব্যবহার করার আগে সম্ভবত এই আধুনিক CSS সমাধানগুলি কার্যকর হতে পারে:
আধুনিক ক্লিয়ারফিক্স সলিউশন
সঙ্গে ধারক overflow: auto;
ভাসমান উপাদানগুলি সাফ করার সহজ উপায় হ'ল উপাদানটিতে থাকা স্টাইলটি ব্যবহার করা overflow: auto। এই সমাধানটি প্রতিটি আধুনিক ব্রাউজারে কাজ করে।
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
বাহ্যিক উপাদানগুলিতে মার্জিন এবং প্যাডিংয়ের নির্দিষ্ট সংমিশ্রণগুলি ব্যবহার করার ফলে একটি ডাউনসাইড, স্ক্রোলবারগুলি উপস্থিত হতে পারে তবে মার্জিন রেখে এবং উপাদান যুক্ত অন্য প্যারেন্টকে প্যাডিং দিয়ে সমাধান করা যেতে পারে।
'ওভারফ্লো: লুকানো' ব্যবহার করাও একটি ক্লিয়ারফিক্স সমাধান, তবে এতে স্ক্রোলবার থাকবে না, তবে এটি ব্যবহার করে hiddenউপাদানগুলির বাইরে থাকা কোনও সামগ্রী ক্রপ করে দেবে।
দ্রষ্টব্য: ভাসমান উপাদানটি imgএই উদাহরণে একটি ট্যাগ, তবে কোনও HTML উপাদান হতে পারে।
ক্লিয়ারফিক্স রিলোড হয়েছে
সিএসএসমোজে থিয়েরি কোবলেন্টজ লিখেছেন: খুব সাম্প্রতিক ক্লিয়ারফিক্স পুনরায় লোড হয়েছে । তিনি উল্লেখ করেছিলেন যে ওল্ডআইইয়ের পক্ষে সমর্থন বাদ দিয়ে সমাধানটি একটি সিএসএসের বিবৃতিতে সহজ করা যায়। অতিরিক্তভাবে, display: block(পরিবর্তে display: table) ব্যবহারের ফলে ক্লিয়ারফিক্স সহ উপাদানগুলি ভাইবোন হলে মার্জিনগুলি সঠিকভাবে ধসে পড়তে দেয়।
.container::after {
content: "";
display: block;
clear: both;
}
এটি ক্লিয়ারফিক্সের সবচেয়ে আধুনিক সংস্করণ।
⋮
⋮
পুরানো ক্লিয়ারফিক্স সলিউশন
আধুনিক ব্রাউজারগুলির জন্য নীচের সমাধানগুলি প্রয়োজনীয় নয় তবে এটি পুরানো ব্রাউজারগুলি লক্ষ্য করে কার্যকর হতে পারে।
নোট করুন যে এই সমাধানগুলি ব্রাউজার বাগগুলিতে নির্ভর করে এবং তাই উপরের সমাধানগুলির কোনওটি আপনার জন্য কাজ না করে কেবল তখনই ব্যবহার করা উচিত।
এগুলি প্রায় কালানুক্রমিক ক্রমে তালিকাভুক্ত করা হয়।
"বিট দ্যাট ক্লিয়ারফিক্স", আধুনিক ব্রাউজারগুলির জন্য একটি ক্লিয়ারফিক্স
এর থিয়েরি Koblentz ' সিএসএস মোজো নির্দিষ্ট করেছে যে যখন আধুনিক ব্রাউজারে লক্ষ্য করে, আমরা এখন ড্রপ করতে পারেন zoomএবং ::beforeসম্পত্তি / মূল্যবোধ ও কেবল ব্যবহার করুন:
.container::after {
content: "";
display: table;
clear: both;
}
এই সমাধানটি IE 6/7 এর জন্য সমর্থন করে না ... উদ্দেশ্যে!
থিয়েরি এছাড়াও অফার করে: " সাবধানতার একটি শব্দ : আপনি যদি স্ক্র্যাচ থেকে কোনও নতুন প্রকল্প শুরু করেন, তবে এটির জন্য যান, তবে আপনার এখনকারটি দিয়ে এই কৌশলটি অদলবদল করবেন না, যদিও আপনি পুরানো সমর্থন করেন না, আপনার বিদ্যমান বিধিগুলি রোধ করে মার্সিন ভেঙে যাচ্ছে "
মাইক্রো ক্লিয়ারফিক্স
নিকোলাস গ্যালা’র মাইক্রো ক্লিয়ারফিক্স , সাম্প্রতিক ও বিশ্বব্যাপী গৃহীত ক্লিয়ারফিক্স সমাধান ।
পরিচিত সমর্থন: ফায়ারফক্স 3.5+, সাফারি 4+, ক্রোম, অপেরা 9+, আই 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
ওভারফ্লো সম্পত্তি
এই মৌলিক পদ্ধতিটি স্বাভাবিক ক্ষেত্রে পছন্দ করা হয়, যখন পজিশনের সামগ্রীটি ধারকটির সীমা ছাড়িয়ে দেখানো হয় না।
http://www.quirksmode.org/css/cleering.html
- ব্যাখ্যা করে কীভাবে এই কৌশল সম্পর্কিত সাধারণ সমস্যাগুলি সমাধান করা যায়, যথা, ধারকটিতে সেট width: 100%করা।
.container {
overflow: hidden;
display: inline-block;
display: block;
}
displayIE এর জন্য "hasLayout" সেট করার জন্য সম্পত্তিটি ব্যবহার করার পরিবর্তে , অন্যান্য বৈশিষ্ট্যগুলিকে একটি উপাদানটির জন্য "hasLayout" ট্রিগার করার জন্য ব্যবহার করা যেতে পারে ।
.container {
overflow: hidden;
zoom: 1;
display: block;
}
overflowসম্পত্তি ব্যবহার করে ভাসমান সাফ করার আরেকটি উপায় হ'ল আন্ডারস্কোর হ্যাক ব্যবহার করা । আইআর আন্ডারস্কোরের সাথে পূর্বনির্ধারিত মানগুলি প্রয়োগ করবে, অন্য ব্রাউজারগুলি তা করবে না। zoomসম্পত্তি আরম্ভ করে hasLayout ইন্টারনেট দেখুন:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
এটি যখন কাজ করে ... হ্যাকগুলি ব্যবহার করা আদর্শ নয়।
পিআইই: সহজ ক্লিয়ারিং পদ্ধতি
এই পুরানো "ইজি ক্লিয়ারিং" পদ্ধতিটি আরও জটিল সিএসএস ব্যয় করে স্থিত উপাদানগুলিকে ধারকটির গণ্ডির বাইরে ঝুলতে দেওয়ার সুযোগ দেয়।
এই সমাধানটি বেশ পুরানো, তবে আপনি পজিশটি হ'ল ইজ হিউরিওয়েজ ইজি ক্লিয়ারিং সম্পর্কে সমস্ত কিছু জানতে পারেন: http://www.positioniseverything.net/easycleering.html
"পরিষ্কার" সম্পত্তি ব্যবহার করে এলিমেন্ট
আপনি যখন কিছু দ্রুত একসাথে চড় মারছেন তখন এর দ্রুত এবং নোংরা সমাধান (কিছু ত্রুটি সহ):
<br style="clear: both" /> <!-- So dirty! -->
অপূর্ণতা
- এটি প্রতিক্রিয়াশীল নয় এবং মিডিয়া প্রশ্নের উপর ভিত্তি করে লেআউট শৈলীগুলি পরিবর্তিত হলে পছন্দসই প্রভাব সরবরাহ করতে পারে না। খাঁটি সিএসএসে একটি সমাধান আরও আদর্শ।
- এটি অগত্যা কোনও শব্দার্থক মান যুক্ত না করে এইচটিএমএল মার্কআপ যুক্ত করে adds
- এটির এইচটিএমএলে CSS এবং শ্রেণি রেফারেন্সে একটি "ক্লিয়ারফিক্স" এর একক সমাধানের শ্রেণি রেফারেন্সের পরিবর্তে প্রতিটি উদাহরণের জন্য একটি ইনলাইন সংজ্ঞা এবং সমাধান প্রয়োজন।
- এটি অন্যদের সাথে কাজ করা কোডটিকে কঠিন করে তোলে কারণ তাদের চারপাশে কাজ করার জন্য তাদের আরও হ্যাক লিখতে হতে পারে।
- ভবিষ্যতে যখন আপনার অন্য / ক্লিয়ারফিক্স সমাধানটি ব্যবহার করতে হবে / প্রয়োজন হবে তখন আপনাকে আর ফিরে যেতে হবে না এবং
<br style="clear: both" />মার্কআপের চারপাশে থাকা প্রতিটি ট্যাগ সরিয়ে ফেলতে হবে না ।
