CSS Float और Clear
Z-index ने ओवरलैपिंग लेयरें सजाईं। float और clear एक अलग क्लासिक समस्या हल करते हैं: टेक्स्ट को इमेज या कॉलआउट के किनारे चिपकने दो, फिर तय करो कि अगला ब्लॉक उन floats के नीचे कब गिरे। रैप पैटर्न सीखो — पेज ग्रिड Flexbox और Grid के हवाले छोड़ो।
float और clear टूलकिट
📊 float और clear एक नज़र में
| टूल | रोज़ का काम |
|---|---|
float: left |
बॉक्स बाएँ खींचता है; आगे का कंटेंट दाएँ लपेट सकता है |
float: right |
बॉक्स दाएँ खींचता है; आगे का कंटेंट बाएँ लपेट सकता है |
float: none |
डिफ़ॉल्ट — कोई float व्यवहार नहीं |
clear: left |
अगला ब्लॉक बाएँ floats के पास नहीं बैठता |
clear: right |
अगला ब्लॉक दाएँ floats के पास नहीं बैठता |
clear: both |
अगला ब्लॉक दोनों तरफ़ के किसी भी float के नीचे गिरता है |
| Clearfix | पैरेंट floated बच्चों को समेटने के लिए बढ़ता है (जैसे overflow या display: flow-root) |
Floated बॉक्स सामान्य फ्लो को खास तरीके से छोड़ते हैं: पड़ोसी उनके बगल में लपेट सकते हैं, और अगर पैरेंट में सिर्फ floats हों तो ऊँचाई शून्य तक सिकुड़ सकती है। यही सिकुड़न clearfix की वजह है।
इमेज float करो, कहानी लपेटो
फिगर को बाएँ खींचो और पैराग्राफ उसके बगल बहने दो। इमेज को चौड़ाई दो ताकि रैप जानबूझकर लगे, आकस्मिक नहीं।
.article img.pull-left {
float: left;
width: 40%;
max-width: 220px;
margin: 0 1rem 0.75rem 0;
}
कॉलआउट दूसरी तरफ़ float करो
छोटा टिप या उद्धरण दाएँ बैठ सकता है जबकि बॉडी टेक्स्ट बाएँ लपेटे। मार्जिन रखो ताकि टेक्स्ट बॉक्स से न चिपके।
.tip {
float: right;
width: 38%;
margin: 0 0 1rem 1rem;
padding: 0.75rem 1rem;
background: #f5f7ff;
border-left: 3px solid #0b5fff;
}
clear — float से चिपकना बंद
जब हेडिंग, फुटर या अगला सेक्शन floats के नीचे नई लाइन से शुरू होना चाहिए, clear इस्तेमाल करो। clear: both रोज़ का «सब floated चीज़ों के नीचे गिरो» है।
.article-footer {
clear: both;
padding-top: 1rem;
border-top: 1px solid #eee;
}
सिकुड़े पैरेंट को clearfix चाहिए
अगर पैरेंट सिर्फ floated बच्चों को लपेटे, ऊँचाई सिकुड़ सकती है और बैकग्राउंड/बॉर्डर टूटे लगते हैं। शांत फ़िक्स: पैरेंट पर overflow: auto (या hidden) — या आधुनिक display: flow-root।
.media-row {
overflow: auto;
padding: 1rem;
border: 1px solid #e5e5e5;
}
.media-row img {
float: left;
margin-right: 1rem;
}
flow-root — साफ़ कंटेनिंग ब्लॉक
display: flow-root नया ब्लॉक फ़ॉर्मेटिंग कॉन्टेक्स्ट बनाता है ताकि पैरेंट अपने floats समेटे — overflow के साइड इफ़ेक्ट उधार लिए बिना।
.card-with-float {
display: flow-root;
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
}
शांत float आदत
मीडिया के इर्द-गिर्द टेक्स्ट और छोटे रैप ट्रिक्स के लिए float। नेव, पेज कॉलम और कार्ड ग्रिड के लिए Flexbox या Grid। याद रखो: position रखता है; z-index परतें; float लपेटता है।
.feature {
display: flow-root;
}
.feature__media {
float: left;
width: 42%;
margin: 0 1rem 0.5rem 0;
}
.feature__copy {
/* wraps beside the media, then clears naturally as needed */
}
खुद आज़माओ
- पैराग्राफ-भारी आर्टिकल में इमेज बाएँ float करो और मार्जिन ट्यून करो।
- टिप बॉक्स दाएँ float करो और बॉडी टेक्स्ट बगल में लपेटो।
- floats के बगल चढ़ते फुटर पर
clear: bothलगाओ। - सिकुड़े पैरेंट को
overflow: autoयाdisplay: flow-rootसे ठीक करो। - एक वाक्य लिखो: float की जगह Flex कब चुनोगे?
आम गलतियाँ
- पूरा पेज लेआउट float से बनाना, Flex/Grid की जगह
clearभूलना ताकि फुटर इमेज के बगल चढ़ें- floated बच्चों के इर्द-गिर्द सिकुड़े पैरेंट अनदेखा करना
- float को
positionयाz-indexजैसा मानना clearसिर्फ floated बॉक्स पर लगाना जब मतलब अगला ब्लॉक था
सार
floatबॉक्स को किनारे खींचता है ताकि आगे का कंटेंट लपेट सकेclearबाद के ब्लॉकों को floats के नीचे गिराता है- सिर्फ-floats वाले पैरेंट सिकुड़ सकते हैं — overflow या
flow-rootसे clearfix - रैप पैटर्न के लिए float; पेज संरचना के लिए Flex/Grid
- प्लेसमेंट और स्टैकिंग अपने टूल में रहें (
position,z-index)
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी