कैसे फ्लॉटिंग को मिटाया जाए (Clearfix)

Clearfix तकनीक का उपयोग करने के लिए सीखें.

clearfix तकनीक

यदि कोई एलिमेंट अपने वर्गीकरण एलिमेंट से ऊंचा है और वह फ्लॉटिंग है, तो वह अपने कंटेनर से बह जाएगा.

तब, हम इस समस्या को हल करने के लिए विस्तृत विस्तार को जोड़ सकते हैं: overflow: auto;

उदाहरण

.clearfix {
  overflow: auto;
}

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

यदि आप बाहरी मार्गदर्शन और आंतरिक मार्गदर्शन को नियंत्रित कर सकते हैं,overflow:auto फ्लॉटिंग को मिटाने का प्रभाव बहुत अच्छा है (अन्यथा, आपको स्क्रॉलबार दिखने सकता है).

तथापि, नए, आधुनिक clearfix तकनीक उपयोग में अधिक सुरक्षित है, अधिकांश वेबपेज निम्नलिखित कोड का उपयोग करते हैं:

उदाहरण

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

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

संबंधित पृष्ठ

शिक्षा:CSS फ्लॉटिंग