clear: oba nie będą działać.

Question

Poniżej znajduje się menu wewnątrz nagłówka. Elementy ul i li są pływające i są teraz unoszone pod nagłówkiem, co starałem się uniemożliwić z jasnym: oba. To jednak nie działa, więc zastanawiam się ... co może być nie tak?

html:

<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> 

css:

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

Można użyć clearfix:

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

i zastosować że zarówno ul i cel.

Answer 2

Nie można używać /> dla div. Zmień go z <div class='clear'/> na <div class="clear"></div>

Lub spróbuj dodać kolejne li poniżej bieżących i dając wyraźną klasę.

<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

Lepsze css dla danej sytuacji byłoby (Testowany w FF, Chrome, 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

Zamiast używać cleardiv, być może można spróbować standardowego clearfix z html5boilerplate?

Oto zmodyfikowane znaczniki:

<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> 

i tutaj jest css dodać:

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

.clearfix:after { 
    clear: both; 
} 


.clearfix { 
    *zoom: 1; 
} 

Od docs:

.clearfix

Dodawanie. poprawka do elementu zapewni, że zawsze będzie w pełni utrzymuje swoje płynące dzieci. Przez lata istniało wiele wariantów hakowania clearfix i istnieją inne hacki, które również mogą pomóc ci w powstrzymaniu unoszących się dzieci, ale w Kasecie HTML5 aktualnie używa się mikro-poprawki.