वेब पेजों के साथ मेरे पास एक आम समस्या है जो उनके कंटेनर के बाहर निकलने वाली तरफ बहती है।क्यों ओवरफ्लो छुपा स्टॉप फ़्लोटिंग तत्व अपने कंटेनर से बचते हैं?
#wrapper{
border:1px solid red;
}
#wrapper div{
float:left;
font-size: 3em;
}
...
<div id="wrapper">
<div>Hello World</div>
</div>
लाइव उदाहरण:
एक बहुत neater समाधान मैंने देखा है आवरण divs की स्थापना है: http://jsfiddle.net/ugUVa/1/
रहे हैं गंदा तरीके का एक बहुत यह (दोनों स्पष्ट साथ एक div डालने) ठीक करने के लिए अतिप्रवाह शैली के लिए छिपा हुआ:
उदाहरण: http://jsfiddle.net/ugUVa/2/
यह ब्राउज़रों में अच्छी तरह से काम अच्छा और सफाई से कोई अतिरिक्त मार्कअप के साथ। मैं खुश हूं, लेकिन मुझे नहीं पता कि यह क्यों काम करता है!
सभी प्रलेखन मैं पर ध्यान दिया है इंगित करता है अतिप्रवाह: छिपा सामग्री छिपा, अपने बच्चों को फिट करने के एक माता पिता का आकार बदलने के लिए नहीं है ...
किसी को भी इस व्यवहार के लिए एक स्पष्टीकरण दे सकते हैं?
धन्यवाद
एक बार तत्व को फ़्लोट करने के बाद, इसे गणना के आकार के लिए दस्तावेज़ प्रवाह से अनिवार्य रूप से हटा दिया जाता है। चूंकि कंटेनर अब "खाली" है, इसलिए यह न्यूनतम अनुमत आकार तक सीमित हो जाता है। समाशोधन तत्व जोड़ना, या ओवरफ्लो सेट करना कंटेनर को आकार देने के लिए अंदर सब कुछ मानने के लिए मजबूर करता है, जिसमें फ्लोट किए गए तत्व शामिल हैं जिन्हें अन्यथा अनदेखा किया जाएगा। –
@MarcB एक उत्तर होना चाहिए। – Christoph
मुझे पता है कि आप एक स्पष्टीकरण की तलाश में हैं, न कि एक फिक्स, लेकिन आप clearfix हैक का भी उपयोग कर सकते हैं। असल में 'स्पष्ट: दोनों;' div के समान, लेकिन कोई अतिरिक्त मार्कअप के साथ। मेरा उदाहरण देखें: http://jsfiddle.net/TheNix/fSBhT/ और उस पर एक लेख: http://nicolasgallagher.com/micro-clearfix-hack/ – Nix