सीएसएस क्लियरिंग फ्लोट्स

Question

मैं प्रस्तुति से अपनी एचटीएमएल संरचना को अलग करने के लिए और अधिक प्रयास कर रहा हूं, लेकिन कभी-कभी जब मैं चीजों को क्रॉस-ब्राउजर बनाने के लिए हैक्स या वर्कअराउंड की जटिलता को देखता हूं, तो मैं विशाल सामूहिक रूप से आश्चर्यचकित हूं उत्पादक घंटों का अपशिष्ट जो इसमें डाल दिया जाता है।

जैसा कि मैंने इसे समझ लिया है, लेआउट बनाने के लिए फ्लोट कभी नहीं बनाए गए थे, लेकिन क्योंकि कई लेआउट को एक पाद लेख की आवश्यकता होती है, इस तरह उनका उपयोग अक्सर किया जा रहा है। फ्लोट को साफ़ करने के लिए, आप एक खाली div जोड़ सकते हैं जो दोनों तरफ साफ़ करता है (div class = "clear")। यह सरल है और क्रॉस ब्राउज़र काम करता है, लेकिन यह सीएसएस के भीतर प्रेजेंटेशन समस्या को हल करने के बजाय "गैर-अर्थपूर्ण" एचटीएमएल जोड़ता है।

मैं यह एहसास है, लेकिन उनके लाभ और कमियां के साथ समाधान के सभी देखने के बाद, यह बजाय विभिन्न सीएसएस सहित अलग शैली, बनाएँ, खाली div (ब्राउज़रों में उम्मीद के मुताबिक व्यवहार) के साथ जाने के लिए और अधिक समझ बनाने के लिए लगता है हैक्स और वर्कअराउंड इत्यादि, जो सीएसएस के रूप में विकसित होने की भी आवश्यकता होगी।

क्या यह ओ.के. है। ऐसा करने के लिए जब तक आप समझें कि आप क्या कर रहे हैं और आप इसे क्यों कर रहे हैं? या सीएसएस वर्कअराउंड, हैक और प्रस्तुति से अलग संरचना को हर कीमत पर खोजना बेहतर है, भले ही सीएसएस प्रस्तुति उपकरण प्रदान किए गए हों, जहां वे इस तरह के बुनियादी लेआउट मुद्दों को संभाल सकें?

Answer 1

तुम्हारा सही दृष्टिकोण है: आईई संस्करण सीएसएस 2.1 का समर्थन नहीं करते में, hasLayout वांछित असर होता है। नियम उन लोगों के लिए बनाए जाते हैं जो उन्हें समझ में नहीं आते हैं। यदि आप सभी पेशेवरों और contras जानते हैं, तो अपनी खुद की कॉल करें।

आप इस मामले में विशेष रूप से उचित हैं।सीएसएस ने सामग्री बी को क्षैतिज रूप से सामग्री ए से अलग करने की सामान्य इच्छा को अनदेखा करने का निर्णय लिया है, इसलिए आपको कम से कम एक हैक चुनना होगा। मैं पहले से प्रस्तुत तीन समाधानों की तुलना करता हूं।

• आपका समाधान खराब है क्योंकि यह दस्तावेज़ की सामग्री बदल गया है, तत्व सी डालने का एकमात्र उद्देश्य ए और बी के बीच दृश्य पृथक्करण है। सामग्री को लेआउट उद्देश्य प्रदान नहीं करना चाहिए।
• कार्पी का समाधान थोड़ा खराब है (मेरी पुस्तक में) क्योंकि यह एक समान तरीके से समान है। छद्म तत्व ": उसके बाद" इसके लिए डिजाइन नहीं किया गया था। हालांकि, वास्तव में एचटीएमएल को कभी भी बदलने में इसका कोई बड़ा फायदा नहीं है।
• पोर्नेल का समाधान ए और बी के गुणों के कट्टरपंथी परिवर्तन से वांछित अलगाव प्राप्त करता है। परिवर्तन न केवल बी से अलग होगा, बल्कि पूर्व सामग्री से ए को भी अलग करेगा, ए की चौड़ाई की गणना की जाएगी और इसी तरह। बेशक, कभी-कभी यह बिल्कुल ठीक है, लेकिन आपको उन अप्रत्याशित दुष्प्रभावों से अवगत होना चाहिए।

पसंद हमारा है।

Answer 2

मैं निश्चित रूप से divs को साफ़ करने के लिए अतिरिक्त मार्कअप का उपयोग करने के विचार से सहमत नहीं हूं।

मैं 'समूह' दृष्टिकोण के पक्ष में - माता पिता div पर class="group" डाल, निम्नलिखित सीएसएस के साथ:

/* Clear groups of floats by putting class="group" on their parent */ 
.group:after 
{ 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

और IE6 के लिए एक IE विशिष्ट स्टाइलशीट/7 में:

/* IE7 */ 
.group 
{ 
    min-height: 1px; 
} 

/* IE6 */ 
* html .group 
{ 
    height: 1%; 
} 

यह एंडी बड द्वारा सीएसएस निपुणता में विस्तृत किया गया था। यह अर्थशास्त्र को थोड़ा सा फैलाता है, लेकिन यह समझ में आता है - आप एक साथ फ़्लोटेड divs समूह कर रहे हैं, जो स्पष्ट रूप से एक दूसरे के साथ कुछ संबंध है।

संपादित करें: मैं इस एक विशाल हैक या वैकल्पिक हल पर विचार नहीं होता या तो - विधि विभिन्न रूपों में साल के लिए चारों ओर हो गया है, (आमतौर पर 'clearfix' पद्धति के रूप में जाना जाता है), और मैं इसे दूर जा नहीं दिख रहा है कभी भी जल्द ही।

Answer 3

साफ़फिक्स अधिकांश समय अनावश्यक है, और हैक का लोकप्रिय संस्करण अनिवार्य रूप से वर्बोज़ और जटिल है।

आप कंटेनर में overflow:hidden लागू करके समाशोधन प्रभाव प्राप्त कर सकते हैं। यदि कंटेनर की निश्चित ऊंचाई नहीं है, तो यह वैसे भी सामग्री के आकार तक फैल जाएगी। यह एक हैक नहीं है, लेकिन specified behavior जो सभी ब्राउज़रों में काम करता है।

और तुम सच में overflow:visible जरूरत है जब आप कर सकते हैं मार्कअप में अतिरिक्त तत्व के बिना अभी भी स्पष्ट:

.container::after { 
    content:""; /* not "."! */ 
    display:block; 
    clear:both; 
} 

और कहा कि पूरी तरह से मानक सीएसएस 2.1 है।

.container { 
    zoom:1; 
}