मार्जिन टॉप क्यों काम नहीं करता है?

Question

एचटीएमएल संरचना:

<div id="main"> 
    <div id="left"></div> 
    <div id="right"></div> 
<div id="footer"></div> 
</div> 

शैली:

#main{ 
    margin: 0 auto; 
    width: 960px; 
} 
#left{ 
    float: left; 
    border: 1px solid red; 
    width: 300px; 
    margin-right: 10px; 
    height: 500px; 
} 
    #right{ 
    float: right; 
    border: 1px solid green; 
    width: 500px; 
    height: 500px; 
} 
#footer{ 
    clear: both; 
    margin-top: 20px; 
    border: 1px solid lime; 
    height: 200px; 
} 

क्यों पाद लेख में margin-top: 20px; काम नहीं करता है? इसका कारण क्या हो सकता है?

Answer 1

प्रयास करें जोड़ने के लिए कुछ स्पष्ट:

<div id="main"> 
    <div id="left"></div> 
    <div id="right"></div> 
    <div style="clear:both"></div> 
    <div id="footer"></div> 
</div> 

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

<div id="main"> 
    <div id="left" style="background:#FF000;border:solid 1px #000000;float:left">LEFT</div> 
    <div id="right" style="background:#00FF00;border:solid 1px #000000;float:right">RIGHT</div> 
    <div id="footer" style="clear:both;margin-top:10px;background:#00FFFF;border:solid 1px #000000;">FOOTER</div> 
</div> 

अतिरिक्त div के साथ:

अतिरिक्त div बिना

<div id="main"> 
    <div id="left" style="background:#FF000;border:solid 1px #000000;float:left">LEFT</div> 
    <div id="right" style="background:#00FF00;border:solid 1px #000000;float:right">RIGHT</div> 
    <div style="background:#0000FF;border:solid 1px #000000;clear:both">CLEARER</div> 
    <div id="footer" style="margin-top:10px;background:#00FFFF;border:solid 1px #000000;">FOOTER</div> 
</div> 

संसाधन:

http://www.w3.org/TR/CSS2/visuren.html#flow-control

Answer 2

चल आइटम साफ़ करने का एक div जोड़े

<div id="main"> 
    <div id="left"></div> 
    <div id="right"></div> 
    <div class="clear"></div> 
<div id="footer"></div> 
</div> 

और सीएसएस

.clear { 
    clear: both; 
} 

बाएँ और दाएँ जहां अस्थायी, अंतरिक्ष वे ढह पर कब्जा कर लिया के बाद से, तो नाव साफ़ करने से इस अंतरिक्ष वापस लाता है और पाद लेख के बाद यह