स्पष्ट: दोनों काम नहीं करेंगे

Question

नीचे हेडर के अंदर एक मेनू है। उल और ली तत्व तैर रहे हैं और अब हेडर के नीचे तैर रहे हैं, जिन्हें मैंने स्पष्ट से रोकने की कोशिश की है: दोनों। हालांकि, यह काम नहीं लग रहा है इसलिए मुझे आश्चर्य है ... क्या गलत हो सकता है?

एचटीएमएल:

<header> 
    <ul> 
     <li><a href='#'>Item 1</a></li> 
     <li><a href='#'>Item 2</a></li> 
     <li><a href='#'>Item 3</a></li> 
     <li><a href='#'>Item 4</a></li> 
    </ul> 
    <div class='clear'/> 
</header> 

सीएसएस:

header { 
    background: #888; 
    height: 20px; 
    padding: 10px; 
} 

ul{ 
    margin: 18px 0; 
    padding: 0; 
    list-style: none; 
} 

ul li{ 
    margin: 0 10px 0 0; 
    padding: 0; 
    display: block; 
    float: left; 
    width: 80px; 
    height: 20px; 
    border: 1px solid #000; 
    background: red; 
} 

ul li a{ 
    display:block; 
    width: 100%; 
    height: 100%; 
    text-decoration: none; 
    float: left; 
    text-align: center; 
    padding-top: 2px; 
} 

ul li a:hover{ 
    color: #fff; 
    background-color: #000; 
}​ 

.clear { 
    clear:both; 
} 

Answer 1

आप एक clearfix उपयोग कर सकते हैं:

.clearfix:after { 
    clear:both; 
    content:"."; 
    display:block; 
    height:0; 
    line-height:0; 
    visibility:hidden; 
} 

और दोनों उल और हैडर है कि लागू होते हैं।

Answer 2

आप divs के लिए /> उपयोग नहीं कर सकते। इसे <div class='clear'/> से <div class="clear"></div>

या वर्तमान वाले के नीचे एक और ली जोड़ने और स्पष्ट कक्षा देने का प्रयास करें।

<header> 
    <ul> 
     <li><a href='#'>Item 1</a></li> 
     <li><a href='#'>Item 2</a></li> 
     <li><a href='#'>Item 3</a></li> 
     <li><a href='#'>Item 4</a></li> 
     <li class='clear'></li> 
    </ul> 
</header> 

Answer 3

अपनी स्थिति के लिए

बेहतर सीएसएस (एफएफ, क्रोम में परीक्षण किया गया, IE6 +) की जाएगी

header { 
    display: block; /* Necessary for older browsers to render this html5 element properly */ 
    background: #888; 
    height: 20px; 
    padding: 10px; 
} 

ul { 
    margin: 18px 0; 
    padding: 0; 
    list-style: none; 
} 

ul li { 
    margin: 0 10px 0 0; /* at least some margin-right is necessary to make inline-block work in IE */ 
    padding: 0 5px; /* you don't have to set a width any longer, so let padding define spacing */ 
    display: inline-block; 
    zoom: 1; /* part 1 of the IE hack to make inline-block work */ 
    *display: inline; /* part 2 of the IE hack to make inline-block work */ 
    /* height and line-height not necessary - driven by a element below */ 
    border: 1px solid #000; 
    background: red; 
} 

ul li a { 
    display:block; 
    height: 20px; 
    line-height: 20px; /* this will vertically center the text in the li */ 
    text-decoration: none; 
    text-align: center; 
} 

ul li a:hover{ 
    color: #fff; 
    background-color: #000; 
}​ 

Answer 4

एक cleardiv का उपयोग करने के बजाय, शायद आप html5boilerplate से मानक clearfix की कोशिश कर सकते?

<header class="clearfix"> 
     <ul> 
      <li><a href='#'>Item 1</a></li> 
      <li><a href='#'>Item 2</a></li> 
      <li><a href='#'>Item 3</a></li> 
      <li><a href='#'>Item 4</a></li> 
     </ul> 
    </header> 

और यहाँ जोड़ने के लिए सीएसएस है:

.clearfix:before, 
.clearfix:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.clearfix:after { 
    clear: both; 
} 


.clearfix { 
    *zoom: 1; 
} 

डॉक्स से:

.clearfix

जोड़ना

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