फ़्लोटिंग बच्चों के चारों ओर लपेटने के लिए मैं div कैसे प्राप्त करूं?

Question

निम्नलिखित कोड को ध्यान में रखते हुए, span तत्व div के अंदर तैर रहे हैं, मैं div फ़्लोटिंग बाल तत्वों के चारों ओर लपेट सकता हूं, ताकि 1px सीमा बच्चों के तत्वों को लपेट सके?

<div style="border:1px solid #000"> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
</div> 

Answer 1

अधिकांश समय, आवरण पर overflow:hidden जोड़ने के लिए पर्याप्त है:

<div style="border:1px solid #000; overflow:hidden;"> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
</div> 

कभी कभी, आप इस वैकल्पिक दृष्टिकोण (जो अधिक hacky है देखेंगे, लेकिन शायद बेहतर बैक संस्करण है ब्राउज़र समर्थन)।

<div style="border:1px solid #000; "> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
    <div style="clear:both;"></div> 
</div> 

Answer 2

उपयोग स्पष्टसीएसएस संपत्ति MDN वेब डॉक्स के अनुसार: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

नोट: एक तत्व केवल तत्वों जारी होता है हैं, उसकी ऊंचाई कुछ भी नहीं करने के लिए गिर। यदि आप हमेशा इसे आकार देने में सक्षम होना चाहते हैं, ताकि इसमें इसके अंदर फ़्लोटिंग तत्व शामिल हों, आपको अपने बच्चों को स्वयं को साफ़ करने की आवश्यकता है। इसे clearfix कहा जाता है, और इसे करने का एक तरीका स्पष्ट प्रतिस्थापित :: छद्म-तत्व पर इसके बाद है।

#container::after { 
    content: ""; 
    display: block; 
    clear: both; 
}