सीएसएस लेआउट - क्लीअर और क्लीअरफ्लॉट

clear गुण

clear गुण निर्दिष्ट करता है कि कौन-से तत्व गाड़े गए तत्व के बगल में फ्लोटिंग कर सकते हैं और किस ओर.

clear गुण को निम्नलिखित मानों में से एक को सेट किया जा सकता है:

  • none - दोनों ओर कोई फ्लोटिंग तत्व अनुमति देता है. डिफ़ॉल्ट मान
  • left - बाएं ओर कोई फ्लोटिंग तत्व नहीं होगा
  • right - दाएं ओर कोई फ्लोटिंग तत्व नहीं होगा
  • both - बाएं या दाएं ओर कोई फ्लोटिंग तत्व नहीं होगा
  • inherit - तत्व अपने पितृक गुण के clear मान को आगे ले लेता है

उपयोग clear गुण का सबसे आम उपयोग तत्व पर है float गुण के बाद.

फ्लोटिंग को मिटाने के दौरान, फ्लोटिंग और मिटाने को मेल खाना चाहिए: यदि कोई तत्व बाएं ओर की ओर फ्लोटिंग करता है, तो बाएं ओर को मिटाना चाहिए. आपके फ्लोटिंग तत्व अभी भी फ्लोटिंग करते रहेंगे, लेकिन मिटाए गए तत्व उसके नीचे दिखाई देंगे.

नीचे दिए गए उदाहरण फ्लोटिंग को बाएं ओर से मिटा देगा. इसका अर्थ है कि (डिव) के बाएं ओर कोई फ्लोटिंग तत्व नहीं होगा:

इंस्टांस

div {
  clear: left;
}

स्वयं को प्रयास करें

clearfix Hack

यदि कोई तत्व अपने शामिल तत्व से ऊंचा है और यह फ्लोटिंग है, तो यह अपने कंटेनर के बाहर 'उत्सर्जित' हो जाएगा:

तब हम इस मसले को सुलझाने के लिए वाली एलिमेंट को overflow: auto; जोड़ सकते हैं:

इंस्टांस

.clearfix {
  overflow: auto;
}

स्वयं को प्रयास करें

अगर आप बाहरी मार्गदर्शन और अंतर मार्गदर्शन को नियंत्रित कर सकते हैं (अन्यथा आपको स्क्रॉल बार दिखाई देगा), overflow: auto clearfix बहुत अच्छी तरह से काम करेगा।बुनियादी clarification hack तकनीक इस्तेमाल करना अधिक सुरक्षित है, नीचे दिए गए कोड अधिकांश वेबसाइटों में इस्तेमाल किया जाता है:

इंस्टांस

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

स्वयं को प्रयास करें

आप बाद में के अध्याय में सीखेंगे ::after फ़ॉक्सेल एलीमेंट