फ़्लोट किए गए बाल तत्व: अतिप्रवाह: छुपा या साफ़: दोनों?

Question

एक वेब डेवलपर के रूप में मैं अक्सर दूसरे (पैरेंट) div के अंदर दो फ्लोट (बच्चे) divs होगा। वास्तव में मैं इसे पूरे दिन करता हूं।

<style type="text/css"> 
    #left {float:left;} 
    #right {float:right;} 
</style> 
<div id="parent"> 
    <div id="left" class="child">&nbsp;</div> 
    <div id="right" class="child">&nbsp;</div> 
</div> 

यह सीएसएस/HTML का एक अतिरिक्त बिट के बिना काम नहीं करता है, क्योंकि माता-पिता को स्वचालित रूप से जारी बच्चों फिट करने के लिए भी नहीं बढ़ता है। उस पर काबू पाने के दो लोकप्रिय तरीके हैं:
1) overflow:hidden माता-पिता के सीएसएस में जोड़ें।
2) एक तीसरा "समाशोधन" बच्चा <br style="clear:both;" /> जोड़ें।

मैं जानता हूँ कि वहाँ इस तरह की चीजों के बारे में कुछ अन्य इसी तरह के सवाल, लेकिन मेरे सवाल यह है:

जो विधि बेहतर है और क्यों है? प्रत्येक के पेशेवर और विपक्ष क्या हैं?

Answer 1

1. छिपी हुई अतिप्रवाह - सुंदर ठोस विधि। मुख्य नुकसान यह है कि यदि आप मूल तत्व पर ऊंचाई निर्धारित करते हैं, तो कोई भी अतिप्रवाह होगा ... अच्छा, छुपा हुआ। फ्लोटेड सूची आइटम के साथ मेनू बनाते समय मुझे यह मिला - सबमेनस प्रकट नहीं होगा।

2. एक लाइन ब्रेक के बजाय क्लीयरिंग तत्व, मैं height: 0; clear: both; के साथ एक div का उपयोग करता हूं क्योंकि यह नीचे एक अंतर नहीं बनाएगा। यह एक और ठोस विधि है, मार्कअप में एक अतिरिक्त तत्व होने का एकमात्र नुकसान है।

3. माता-पिता को फ़्लोट करें - मेरे अनुभव में ऐसी कई स्थितियां हैं जहां आप मूल तत्व को फ़्लोट नहीं करना चाहते हैं, इसलिए मैं इससे बचूंगा।

4. तुम भी द्वारा निर्मित सामग्री को विधि का उपयोग कर सकते हैं:

   #parent:after { 
       content: "."; 
       visibility: hidden; 
       clear: both; 
   } 
   

   यह मार्कअप में एक अतिरिक्त तत्व के लिए की ज़रूरत नहीं पड़ती, लेकिन यह IE7 और नीचे में काम नहीं करेगा।

5. इनलाइन ब्लॉक का उपयोग करें - बस इस विधि को याद किया गया। दो कॉलम चल करने के बजाय, उन्हें display: inline-block करने के लिए सेट और वे साथ-पक्ष दिखाई देगा:

   .child { 
       display: inline-block; 
       vertical-align: top; 
   } 
   

   केवल बात आप इस विधि के साथ याद रखना चाहिए कि अगर एक ब्लॉक के बंद टैग और के बीच कोई खाली स्थान के वहाँ है दूसरे का उद्घाटन टैग, कॉलम के बीच एक स्थान दिखाई देगा (जिसका आकार फ़ॉन्ट पर निर्भर करता है ताकि गेज करना मुश्किल हो)। जब तक आप ...</div><div id=... करते हैं तो यह विधि ठीक काम करती है और फ़्लोटिंग तत्व आईएमओ से बेहतर होती है।

Answer 2

दूसरा पूरी तरह से अनावश्यक है और अतिरिक्त मार्कअप जोड़ता है। गलत होने के लिए बस कुछ और। यदि यह बिल फिट बैठता है तो पहले का उपयोग करें। आप वही काम करने के लिए मूल तत्व को भी फ़्लोट कर सकते हैं, हालांकि यह आपके द्वारा किए जा रहे फिट नहीं हो सकता है।

Answer 3

पीपीके QuirksMode पर Clearing floats में इस पर चर्चा करता है।