Clearfix संपत्ति का उपयोग स्वचालित रूप से मूल तत्व को बाल तत्व के अनुसार समायोजित कर सकता है और कुछ विशेषताओं के माध्यम से HTML कोड में समस्याओं को ठीक कर सकता है जैसे ' अतिप्रवाह ” जो अतिरिक्त मार्कअप की आवश्यकता के बिना माता-पिता और बाल तत्वों के आयामों को नियंत्रित करता है।
Clearfix संपत्ति का उपयोग
HTML कोड स्निपेट में CSS Clearfix गुण जोड़कर यह जानने के लिए कि यह आउटपुट में क्या करता है, यह जानने के लिए Clearfix प्रॉपर्टी के उपयोग को समझते हैं:
क्लियरफिक्स संपत्ति के बिना
क्लीयरफ़िक्स को हल करने में सक्षम होने वाली समस्याओं को समझने के लिए क्लीयरफ़िक्स प्रॉपर्टी को निष्पादित किए बिना एक कोड स्निपेट चलाएं:
HTML में एक वर्ग बनाएँ जो एक div कंटेनर में एक छवि सम्मिलित करता है:
< डिव कक्षा = 'क्लीयरफिक्स' >
< बीआर < आईएमजी कक्षा = 'आईएमजी' स्रोत = 'इमेज.पीएनजी' सब कुछ = 'छवि' चौड़ाई = '250' ऊंचाई = '180' >
मूलपाठ...
< / डिव >
उपरोक्त एचटीएमएल के लिए सीएसएस कोड निम्नलिखित है:
<शैली >
.clearfix {
सीमा : 3 पीएक्स ठोस #2baa12 ;
गद्दी : 5 पीएक्स ;
}
आईएमजी {
तैरना : बाएं ;
}
>
यह इस तरह से आउटपुट उत्पन्न करेगा कि इमेज वाली चाइल्ड क्लास कंटेनर के बाहर ओवरफ्लो हो जाएगी। इस तरह की स्थितियों में, इस समस्या को आसानी से साफ़ करने या ठीक करने के लिए स्पष्ट सुधार गुण का उपयोग किया जा सकता है:
क्लियरफिक्स संपत्ति के साथ
समस्या को ठीक करने के लिए, हम बस एक जोड़ सकते हैं अतिप्रवाह के बराबर मूल्य के साथ विशेषता ऑटो जो मूल कंटेनर को बाल तत्व के आकार के अनुसार समायोजित करेगा:
<शैली >.clearfix {
सीमा : 3 पीएक्स ठोस #2baa12 ;
गद्दी : 5 पीएक्स ;
}
.clearfix {
अतिप्रवाह : ऑटो ;
}
आईएमजी {
तैरना : बाएं ;
}
>
यहां इस कोड स्निपेट में, पैरेंट क्लास कंटेनर है और इमेज उसके चाइल्ड क्लास में डाली गई है:
< डिव कक्षा = 'क्लीयरफिक्स' >< बीआर < आईएमजी कक्षा = 'आईएमजी' स्रोत = 'इमेज.पीएनजी' सब कुछ = 'छवि' चौड़ाई = '250' ऊंचाई = '180' >
मूलपाठ...
< / डिव >
क्लीयरफिक्स प्रॉपर्टी जोड़ने से मूल तत्व (कंटेनर) स्वचालित रूप से उस बाल तत्व के आकार के अनुसार विस्तारित हो जाएगा जिसमें छवि डाली गई है:
HTML में Clearfix प्रॉपर्टी इस तरह काम करती है।
निष्कर्ष
अतिरिक्त मार्कअप की आवश्यकता के बिना सरल क्लीयरफिक्स संपत्ति के साथ माता-पिता तत्वों के अनुसार एचटीएमएल में बाल तत्वों को समायोजित करने के लिए एक स्पष्टफिक्स संपत्ति का उपयोग किया जाता है। CSS Clearfix का उपयोग बाल तत्वों के आयामों के अनुसार उन्हें समायोजित करने के लिए मूल तत्वों के आयामों को बढ़ाता या घटाता है।