सीएसएस, एचटीएमएल मदद: छोड़ दिया और सही नाव, पृष्ठभूमि काट अतीत div

Question

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

<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'> 
    <div style='width:1091px;margin:0 auto;margin-top:70px;'> 
     <div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'> 
      float LEFT 
     </div> 
     <div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'> 
      float RIGHT 
     </div> 
    </div> 
</div> 

धन्यवाद!

Answer 1

आपको फ्लोट को साफ़ करना होगा ताकि माता-पिता उन्हें घेर सकें।

<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'> 
    <div style='width:1091px;margin:0 auto;margin-top:70px;'> 
     <div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'> 
      float LEFT 
     </div> 
     <div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'> 
      float RIGHT 
     </div> 

     <!--HERE IS THE CLEARING DIV: --> 
     <div style="clear: left;"></div> 
    </div> 
</div> 

आप माता-पिता को स्वयं ही तैर सकते हैं, और फिर आपको अतिरिक्त मार्कअप (समाशोधन div) की आवश्यकता नहीं होगी। यदि आप ऐसा करते हैं, तो आपके माता-पिता को निर्दिष्ट चौड़ाई की आवश्यकता होगी।

व्याख्या:

जब एक तत्व चल रहा है, माता-पिता उसकी ऊंचाई के बारे में पता नहीं है (जब तक यह एक अस्थायी तत्व में ही है)। आपको फ्लोट्स के नीचे एक स्पष्ट की आवश्यकता है ताकि माता-पिता div अपने सभी बच्चों की पूर्ण ऊंचाई को पहचान सके।

Answer 2

आप तैरता मजबूर-स्पष्ट करने की जरूरत नहीं है - आप केवल किसी भी स्थिति के लिए अतिप्रवाह परिभाषित करने की जरूरत: रिश्तेदार div। अतिप्रवाह: छिपा हुआ और अतिप्रवाह: ऑटो अप IE6 से आगे बिना किसी हस्तक्षेप div बंद करते हैं, सब कुछ पर।

बदलें पहली पंक्ति के लिए:

<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative; overflow:hidden;'> 

और यह इसी कार्य को पूरा करेंगे के रूप में div मजबूर कर बंद कर दिया।