सीएसएस ओवरफ़्लो:

Question

के साथ छिपा हुआ following code on w3schools पढ़ता है और यह समझ में नहीं आता कि overflow संपत्ति ul के दाईं ओर टेक्स्ट दिखाई देती है या नहीं।

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
a { 
 
    display: block; 
 
    width: 60px; 
 
    background-color: #dddddd; 
 
    padding: 8px; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul> 
 
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

मुझे पता है कि overflow:hidden सामग्री है कि बॉक्स के बाहर चला जाता है संभाल करने के लिए प्रयोग किया जाता है, लेकिन समझ में नहीं आता कि यह कैसे इस उदाहरण में लागू होता है।

Answer 1

मैं भ्रम की स्थिति को समाप्त करने के लिए प्रयास करें:

ul एक ब्लॉक-स्तर तत्व है जैसा कि p तत्व है (वे मूल चौड़ाई के 100% तक फैले हैं)। यही कारण है कि प्रति डिफ़ॉल्ट pul के नीचे दिखाई देगा यदि उन तत्वों पर कोई चौड़ाई या प्रदर्शन घोषित नहीं किया गया है।

अब आपके उदाहरण में ul में केवल फ़्लोट किए गए तत्व हैं। यह 0px की ऊंचाई पर गिर जाता है (हालांकि इसमें अभी भी 100% चौड़ाई है जैसा कि आप उदाहरण में देख सकते हैं)। आसन्न p फ्लोट li एस के दाईं ओर दिखाई देगा क्योंकि उन्हें सामान्य फ़्लोट किए गए तत्व माना जाता है।

अब घोषित overflow (किसी भी visible के अलावा अन्य मूल्य) एक नई block formatting context है, जो बनाता है ul अपने बच्चों में शामिल है स्थापित करता है। अचानक ul "फिर से दिखाई देता है", आकार 0px आकार नहीं है। p नीचे धक्का दिया जा रहा है। आप उसी "समाशोधन" प्रभाव को प्राप्त करने के लिए position:absolute भी घोषित कर सकते हैं (साइड इफेक्ट के साथ अब ul सामान्य तत्व प्रवाह से बाहर निकाला जाता है - p एस ul द्वारा ओवरलैप किया जाएगा।)

See the example fiddle

आप तकनीकी सामान में कर रहे हैं, की तुलना सीएसएस कल्पना की अनुसार पैराग्राफ:

§10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
और
§10.6.7 'Auto' heights for block formatting context roots। (लिंक खोदने के लिए बोल्टक्लॉक के लिए धन्यवाद)।

ul{ 
 
    list-style-type:none; 
 
    margin:0; padding:0; 
 
    background-color:#dddddd; 
 
    border:2px solid red; 
 
} 
 
li{ 
 
    float:left; 
 
} 
 
a{ 
 
    display:block; 
 
    width:60px; 
 
    background-color:#555; 
 
    color:white; 
 
} 
 
p{ 
 
    margin:0; 
 
    outline:2px dotted blue; 
 
} 
 
#two{ 
 
    clear:both; 
 
    overflow:hidden; 
 
}

No overflow: 
 
<ul> 
 
<li><a href="#home">Home</a></li> 
 
<li><a href="#news">News</a></li> 
 
<li><a href="#contact">Contact</a></li> 
 
<li><a href="#about">About</a></li> 
 
</ul> 
 
<p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats </p> 
 
<br> 
 
With overflow: hidden 
 
<ul id="two"> 
 
<li><a href="#home">Home</a></li> 
 
<li><a href="#news">News</a></li> 
 
<li><a href="#contact">Contact</a></li> 
 
<li><a href="#about">About</a></li> 
 
</ul> 
 
<p>the ul reappeared - it now contains the child li's - the float is cleared</p>

Answer 2

overflow:hidden;clear:both;<p> के लिए clear:both; का उपयोग करें। यहां यह http://jsfiddle.net/Mvv8w/ उपयोग में है। मूल रूप से overflow:hidden किसी भी चीज को साफ़ कर देगा जो इसे clear:both; करता है।

Answer 3

किसी तत्व पर overflow: hidden सेट करना एक नया फ्लोट संदर्भ बनने का कारण बनता है, इसलिए overflow: hidden लागू तत्वों के अंदर तत्वों को फ़्लोर किया गया है।

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 4

यही कारण है कि w3schools वेब डिजाइनर/डेवलपर्स के लिए एक विश्वसनीय स्रोत नहीं है। आप सही हैं, यह एक भयानक उदाहरण है।

ऐसा इसलिए नहीं है क्योंकि, इस उदाहरण में, मूल तत्व के साथ कोई निश्चित नहीं है। इसके अलावा, यह एक अन-आदेशित सूची टैग है, जो इसके बावजूद बच्चों के आकार तक फैल जाएगा।

http://jsfiddle.net/EhphH/

सीएसएस

.parent { 
    width: 150px; 
    height: 100px; 
    padding: 10px; 
    background: yellow; 
    overflow: hidden; 

} 
.child { 
    float: left; 
    width: 75px; 
    height: 120px; 
    margin: 10px; 
    background: blue; 

} 
.baby { 
    width: 200px; 
    height: 25px; 
    background: green; 
} 

मार्कअप

<div class="parent"> 
    <div class="child"> 
     <div class="baby"> 
     </div> 
    </div> 
    <div class="child"> 
    </div> 
</div>