सीएसएस 'ओवरफ्लो: छुपा' काम कैसे एक तत्व (फ्लोट किए गए तत्व युक्त) को मजबूर करने के लिए तैरता है तत्वों के चारों ओर लपेटने के लिए?

Question

कोई भी जानता है क्यों अतिप्रवाह: तत्वों को लपेटने के लिए फ़्लोट किए गए तत्वों के साथ एक तत्व छुपाता है?

मैं वास्तव में इसका उपयोग करने और 'यह सिर्फ काम करता है' पर भरोसा करने के बजाय आंतरिक कार्यकलापों को समझना चाहता हूं।

मैं समझ सकता हूं कि यह तत्व कैसे काम करता है जब तत्व तत्व फ्लोट किए गए बाल तत्वों के समान दिशा में तैरता है, लेकिन अतिप्रवाह: छिपी हुई सामग्री को फसल करने के लिए छुपा मतलब है (जब स्थिति के साथ उपयोग किया जाता है: पूर्ण/रिश्तेदार)।

किसी भी जानकारी की सराहना की।

Answer 1

तैरता है, पूरी तरह से तत्वों, इनलाइन-ब्लॉक, टेबल-कोशिकाओं, टेबल कैप्शन, और 'अतिप्रवाह' के साथ तत्वों 'दृश्य' के अलावा अन्य तैनात (जब कि मूल्य को छोड़कर व्यूपोर्ट के लिए प्रचारित रहा है) नया ब्लॉक प्रारूपण संदर्भ स्थापित करें।

एक ब्लॉक स्वरूपण संदर्भ में, प्रत्येक बॉक्स के बाएं बाहरी छोर को छू लेती है धारक ब्लॉक के बाईं बढ़त ( दाएँ-से-बाएँ प्रारूपण के लिए, सही स्पर्श किनारों)।यह भी तैरता की उपस्थिति में सच है (हालांकि एक बॉक्स के लाइन बक्से तैरता के कारण हटना सकता है), जब तक कि बॉक्स एक नए ब्लॉक स्वरूपण संदर्भ (जो मामले में बॉक्स ही की वजह से संकरा हो सकते हैं स्थापित करता है फ्लोट्स)।

ब्लॉक स्वरूपण संदर्भ फ्लोट को साफ़ करता है। स्रोत: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 2

सीएसएस 2 चश्मा की Visual formatting model, part 9.2 "Floats" से पूर्ण विवरण:

एक मेज, एक ब्लॉक स्तर प्रतिस्थापित तत्व या सामान्य प्रवाह है कि एक नए ब्लॉक स्वरूपण संदर्भ स्थापित करता है में एक तत्व की सीमा (जैसे कि 'दृश्यमान' के अलावा 'ओवरफ्लो' वाले तत्व के रूप में) उसी ब्लॉक प्रारूपण संदर्भ में किसी भी फ़्लोट को तत्व के रूप में ओवरलैप नहीं करना चाहिए। यदि आवश्यक हो, तो कार्यान्वयन को किसी भी पूर्ववर्ती फ्लोट्स के नीचे रखकर उस तत्व को साफ़ करना चाहिए, लेकिन पर्याप्त जगह होने पर इसे ऐसे फ्लोट के आस-पास रख सकता है। वे धारा 10.3.3 द्वारा परिभाषित की तुलना में कहा तत्व तत्व के सीमा बॉक्स भी बना सकते हैं। सीएसएस 2 परिभाषित नहीं करता है जब एक UA फ्लोट के बगल में तत्व डाल सकता है या कितना कहा गया तत्व संकुचित हो सकता है।

Answer 3

ठीक है, लगता है यह क्यों नहीं एक ही है कि मैं वैसे भी समझ सकते हैं कि क्या होता है (के लिए कोई 'वास्तविक' व्याख्या है - जैसे सीएसएस कल्पना प्रतिक्रियाओं में से एक में प्रदान की जाती अंश बस ने बताया कि जारी की सामग्री के साथ एक बॉक्स नहीं करना चाहिए फ्लोट किए गए तत्वों को लपेटने के लिए विस्तार करें - जो कि ठीक है और यह तार्किक है और मैं इसे पूरी तरह से प्राप्त करता हूं)

मुझे उम्मीद थी कि यह कुछ यादृच्छिक हैक नहीं था जिसने मूल तत्व को अपने चलने वाले बाल तत्वों को लपेटने के लिए मजबूर किया, लेकिन ऐसा लगता है कि हर संसाधन जो मैं देखता हूं, इसका उपयोग करने के लिए कहता है और यह क्यों काम नहीं करता है।

बस एक हैक होना चाहिए।

सबसे उपयोगी संसाधन मैं भर में आया था (या एक है कि सबसे अधिक विस्तार दे दिया - नहीं के रूप में ज्यादा जानकारी के रूप में मैं जरूरत यद्यपि) Quirksmode से था: http://www.quirksmode.org/css/clearing.html

धन्यवाद किसी और के लिए है कि क्या यह के रूप में प्रकाश डाला सकता है अगर एक यादृच्छिक ब्राउज़र रेंडरिंग क्विर्क है या जिस तरह से काम करता है उसके लिए एक तार्किक स्पष्टीकरण है।

एम