फ्लोट किए गए तत्व कंटेनर तत्व की ऊँचाई में नहीं जुड़ते हैं, और इसलिए यदि आप उन्हें साफ़ नहीं करते हैं, तो कंटेनर की ऊँचाई नहीं बढ़ेगी ...
मैं आपको नेत्रहीन दिखाऊंगा:
अधिक स्पष्टीकरण:
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
besides the top div. Why? Because of the top div
is floated left, making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div from floating beside the top ones,
we use `clear: both;`. This is like a wall, so now none of the div's
will be floated after this point. The container height will now also include the
height of these floated divs -->
<div></div>
</div>
आप overflow: hidden;कंटेनर तत्वों को भी जोड़ सकते हैं , लेकिन मैं आपको clear: both;इसके बजाय उपयोग करने का सुझाव दूंगा।
इसके अलावा, यदि आप किसी ऐसे तत्व को स्वयं साफ़ करना चाहें, जिसका आप उपयोग कर सकते हैं
.self_clear:after {
content: "";
clear: both;
display: table;
}
सीएसएस फ्लोट कैसे काम करता है?
क्या वास्तव में फ्लोट है और यह क्या करता है?
floatसंपत्ति सबसे शुरुआती द्वारा गलत समझा है। खैर, वास्तव में क्या करता floatहै? प्रारंभ में, floatसंपत्ति को छवियों के चारों ओर पाठ प्रवाह करने के लिए पेश किया गया था, जो कि फ्लोट किए गए हैं leftया right। यहाँ @Madara Uchicha द्वारा एक और स्पष्टीकरण दिया गया है।
तो, क्या floatबक्से को साइड में रखने के लिए संपत्ति का उपयोग करना गलत है ? उत्तर है नहीं ; यदि आप floatसंपत्तियों का उपयोग साइड बॉक्स को सेट करने के लिए करते हैं तो कोई समस्या नहीं है ।
एक inlineया blockस्तर तत्व फ्लोटिंग तत्व तत्व की तरह व्यवहार करेगा inline-block।
डेमोयदि आप एक तत्व तैरते हैं leftया right, widthतत्व की सामग्री उस सामग्री तक सीमित होगी, जब तक widthकि इसे स्पष्ट रूप से परिभाषित नहीं किया जाता है ...
आप floatएक तत्व नहीं कर सकते center। यह सबसे बड़ा मुद्दा है जिसे मैंने हमेशा शुरुआती लोगों के साथ देखा है float: center;floatसंपत्ति के लिए मान्य मूल्य नहीं है । floatआमतौर पर floatसामग्री को बहुत बाईं ओर या बहुत दाईं ओर ले जाने के लिए उपयोग किया जाता है । केवल हैं चार के लिए मान्य मानों floatसंपत्ति यानी left, right, none(डिफ़ॉल्ट) और inherit।
मूल तत्व ढह जाता है, जब इसमें फ्लोट किए गए बाल तत्व होते हैं, इसे रोकने के लिए, हम clear: both;संपत्ति का उपयोग करते हैं, दोनों पक्षों पर फ्लोट किए गए तत्वों को साफ करने के लिए, जो मूल तत्व के ढहने को रोकेंगे। अधिक जानकारी के लिए, आप यहां मेरे दूसरे जवाब का उल्लेख कर सकते हैं ।
(महत्वपूर्ण) इसके बारे में सोचें जहां हमारे पास विभिन्न तत्वों का ढेर है। जब हम उपयोग करते हैं float: left;या float: right;तत्व एक के बाद एक स्टैक से ऊपर जाता है। इसलिए सामान्य दस्तावेज़ प्रवाह में तत्व फ्लोट किए गए तत्वों के पीछे छिप जाएंगे क्योंकि यह सामान्य फ्लोट किए गए तत्वों के ऊपर स्टैक स्तर पर है। (कृपया इससे संबंधित न हों z-indexक्योंकि यह पूरी तरह से अलग है।)
एक उदाहरण के रूप में एक मामला लेते हुए यह समझाने के लिए कि कैसे सीएसएस तैरता है, यह मानते हुए कि हमें हेडर, फुटर और 2 कॉलम के साथ एक सरल 2 कॉलम लेआउट की आवश्यकता है, इसलिए यहां पर ब्लूप्रिंट कैसा दिखता है ...
उपरोक्त उदाहरण में, हम, या तो आप कर सकते हैं चल केवल लाल बक्से हो जाएगा floatदोनों के लिए left, या आप कर सकते हैं floatकरने के लिए पर leftकरने के लिए, और एक अन्य rightअगर यह 3 कॉलम है, आप कर सकते हैं और साथ ही, लेआउट पर निर्भर करता है, float2 करने के लिए कॉलम left, जहां एक और ऐसा करने के लिए एक rightनिर्भर करता है, हालांकि इस उदाहरण में, हमारे पास एक सरलीकृत 2 कॉलम लेआउट है ताकि floatएक को leftऔर दूसरे को right।
मार्कअप और लेआउट बनाने के लिए शैलियों को और नीचे समझाया गया है ...
<div class="main_wrap">
<header>Header</header>
<div class="wrapper clear">
<div class="floated_left">
This<br />
is<br />
just<br />
a<br />
left<br />
floated<br />
column<br />
</div>
<div class="floated_right">
This<br />
is<br />
just<br />
a<br />
right<br />
floated<br />
column<br />
</div>
</div>
<footer>Footer</footer>
</div>
* {
-moz-box-sizing: border-box; /* Just for demo purpose */
-webkkit-box-sizing: border-box; /* Just for demo purpose */
box-sizing: border-box; /* Just for demo purpose */
margin: 0;
padding: 0;
}
.main_wrap {
margin: 20px;
border: 3px solid black;
width: 520px;
}
header, footer {
height: 50px;
border: 3px solid silver;
text-align: center;
line-height: 50px;
}
.wrapper {
border: 3px solid green;
}
.floated_left {
float: left;
width: 200px;
border: 3px solid red;
}
.floated_right {
float: right;
width: 300px;
border: 3px solid red;
}
.clear:after {
clear: both;
content: "";
display: table;
}
चलिए लेआउट के साथ कदम से कदम मिलाते हैं और देखते हैं कि फ्लोट कैसे काम करता है ..
सबसे पहले, हम मुख्य आवरण तत्व का उपयोग करते हैं, आप केवल यह मान सकते हैं कि यह आपका व्यूपोर्ट है, फिर हम वहां बहुत सारे अन्य headerफ़ेसबुक का उपयोग और असाइन करते heightहैं 50px। यह सिर्फ एक सामान्य गैर फ्लोटेड ब्लॉक स्तर का तत्व है जो 100%क्षैतिज स्थान तक ले जाएगा जब तक कि यह फ्लोट नहीं हो जाता है या हम inline-blockइसे असाइन नहीं करते हैं।
पहले मान्य मान के लिए floatहै leftहमारे उदाहरण में ऐसा है, तो हम उपयोग float: left;के लिए .floated_leftहै, तो हम करने के लिए एक ब्लॉक फ्लोट करने का इरादा leftहमारे कंटेनर तत्व की।
स्तंभ बाईं ओर तैरता था
और हां, अगर आप देखें, तो मूल तत्व, जो .wrapperढह गया है, जिसे आप एक हरे रंग की सीमा के साथ देखते हैं, उसका विस्तार नहीं हुआ, लेकिन क्या यह सही है? थोड़ी देर में वापस आएँगे, अभी के लिए, हमें एक कॉलम मिला है left।
दूसरे कॉलम में आकर, इसे floatयह करने देता हैright
एक अन्य स्तंभ दाईं ओर तैरता है
यहाँ, हम एक है 300pxविस्तृत स्तंभ है जो हम floatकरने के लिए rightहै, जो पहले कॉलम के बगल में बैठेंगे के रूप में यह करने के लिए जारी है left, और के बाद से यह करने के लिए जारी है left, यह करने के लिए खाली गटर बनाई गई rightहै, और के बाद से पर अंतरिक्ष की पर्याप्त नहीं था right, हमारे rightतैरता हुआ तत्व पूरी तरह से leftएक के पास बैठा था ।
फिर भी, मूल तत्व ढह गया है, ठीक है, चलो अब इसे ठीक करें। मूल तत्व को ढहने से रोकने के कई तरीके हैं।
- एक खाली ब्लॉक स्तर तत्व जोड़ें और
clear: both;मूल तत्व समाप्त होने से पहले उपयोग करें , जो फ्लोट किए गए तत्व रखता है, अब यह clearआपके अस्थायी तत्वों का एक सस्ता समाधान है जो आपके लिए काम करेगा लेकिन, मैं आपको इसका उपयोग नहीं करने की सलाह दूंगा।
समाप्त <div style="clear: both;"></div>होने से पहले जोड़ें, .wrapper divजैसे
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
डेमो
ठीक है, यह बहुत अच्छी तरह से ठीक हो जाता है, कोई भी ध्वस्त अभिभावक नहीं होता है, लेकिन यह DOM में अनावश्यक मार्कअप जोड़ देता है, इसलिए कुछ सुझाव देते हैं, overflow: hidden;अभिभावक तत्व पर तैरते हुए बाल तत्वों को रखने के लिए उपयोग करें जो कि काम करते हैं।
overflow: hidden;पर प्रयोग करें.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
डेमो
हमें हर बार हमें एक तत्व की बचत होती है, clear floatलेकिन जैसा कि मैंने इसके साथ विभिन्न मामलों का परीक्षण किया, यह एक विशेष रूप से विफल हो गया, जो box-shadowबाल तत्वों पर उपयोग करता है ।
डेमो (सभी 4 पक्षों पर छाया नहीं देख सकता,overflow: hidden;इस समस्या का कारण बनता है)
तो अब क्या? एक तत्व को सहेजें, overflow: hidden;इसलिए कोई स्पष्ट फिक्स हैक के लिए न जाएं, अपने सीएसएस में नीचे दिए गए स्निपेट का उपयोग करें, और जैसे आप overflow: hidden;मूल तत्व के लिए उपयोग करते हैं, classनीचे के तत्व को स्वयं स्पष्ट करने के लिए कॉल करें ।
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
डेमो
यहां, छाया इच्छित उद्देश्य के साथ काम करती है, साथ ही, यह मूल तत्व को भी साफ कर देती है जो टूटने से बचाता है।
और अंत में, हम clearफ़्लोट किए गए तत्वों के बाद पाद का उपयोग करते हैं।
डेमो
किसी भी तरह से float: none;उपयोग किया जाता है, क्योंकि यह डिफ़ॉल्ट है, इसलिए घोषित करने के लिए कोई उपयोग float: none;?
खैर, यह निर्भर करता है, यदि आप एक उत्तरदायी डिजाइन के लिए जा रहे हैं, तो आप इस मूल्य का उपयोग कई बार करेंगे, जब आप अपने फ़्लोट किए गए तत्वों को एक निश्चित रिज़ॉल्यूशन पर एक दूसरे के नीचे प्रस्तुत करना चाहते हैं। उस float: none;संपत्ति के लिए वहाँ एक महत्वपूर्ण भूमिका निभाता है।
कुछ वास्तविक दुनिया उदाहरण है कि कैसे floatउपयोगी है।
- पहला उदाहरण जो हमने पहले ही देखा था, वह एक या एक से अधिक स्तंभ लेआउट बनाना है।
imgअंदर फ़्लोटिंग का उपयोग करना pजिससे हमारी सामग्री चारों ओर प्रवाहित हो सकेगी।
डेमो (अस्थायी के बिनाimg)
डेमो 2 (imgफ्लोट किए गएleft)
floatक्षैतिज मेनू बनाने के लिए उपयोग करना - डेमो
फ्लोट दूसरे तत्व के रूप में अच्छी तरह से, या `मार्जिन` का उपयोग करें
पिछले नहीं बल्कि कम से कम, मैं इस विशेष मामले की व्याख्या करना चाहता हूं, जहां आप floatकेवल एक तत्व हैं leftलेकिन आप floatदूसरे को नहीं करते हैं, इसलिए क्या होता है?
मान लीजिए अगर हम float: right;अपने से हटाते हैं .floated_right class, तो इसे divचरम से प्रदान किया जाएगा leftक्योंकि यह तैरता नहीं है।
डेमो
तो इस मामले में, या तो आप कर सकते हैं floatकरने के लिए leftके रूप में अच्छी तरह से
या
आप का उपयोगmargin-left200px कर सकते हैं जो बाएँ फ़्लोट किए गए स्तंभ के आकार के बराबर होगा यानी विस्तृत होगा ।