CSS Hintergrundfarbe nicht angezeigt, es sei denn, ich füge overflow:hidden? Warum?

Arbeite ich an einem CSS-layout, aber ich verstehe nicht, warum die hintergrund Farbe meiner Navigationsleiste nicht angezeigt, es sei denn, ich füge overflow: hidden zu der CSS. Kann mir jemand erklären, was Los ist??? Danke 🙂

Meine CSS-Datei:

@import "reset.css"; /* Meyer's CSS reset */

body { background-color: #f3f3f3;   font: 15px sans-serif; }

#wrapper { 
  width: 1000px;
  margin: 0 auto;
}

#navigation {
  width: inherit;
  margin-top: 20px;
  background-color: #ccc;
  overflow: hidden;
}

#navigation li {
  float: left;
}

#navigation li a {
  display: block;
  padding: 10px 10px;
  text-decoration: none;
  color: #000;
}

#navigation li a:hover {
  background-color: #aaa;
}

Meiner HTML-Datei:

<!DOCTYPE html>
<html>
<head>
  <title>Layout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
  <div id="wrapper">
    <div id="navigation">
      <ul>
        <li><a href="">Nav0</a></li>
        <li><a href="">Nav1</a></li>
        <li><a href="">Nav2</a></li>
        <li><a href="">Nav3</a></li>
        <li><a href="">Nav4</a></li>
        <li><a href="">Nav5</a></li>
      </ul>
    </div>
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
  </div>
</body>
</html>

InformationsquelleAutor tomorrow__ | 2011-06-25
  1. 12

    overflow: hidden bewirkt, dass die container, um eine neue Formatierung Kontext, innerhalb derer enthalten, die schwimmt. Ohne ihn ist die schwebte Elemente bilden eine eigene Formatierung zusammenhängen und zeigen unabhängig von der container aus dem normalen Textfluss.

    • wie sagte bolt overflow: hidden hilft, den container an klar, seine inneren schwebt, weil float Kraft auf ein element heraus, es ist die normale Strömung, die haben, um es zu deaktivieren, indem Sie das übergeordnete element . CHECK this LINK WEITERE
    InformationsquelleAutor BoltClock
  2. 2

    Sollten Sie eine klare fix-Klasse (entweder ein leeres element nach der <ul> oder verwenden Sie eine klare fix-Klasse <ul> damit der browser richtig klar, das schwimmt. 

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

    Ist eine, die ich verwenden die meisten der Zeit. Hier ist eine Geige von ihm in Aktion: http://jsfiddle.net/gpQ2f/1/

    • Warum sollte er die Verwendung eines clearfix-Klasse eher als overflow: hidden/auto?
    • Es ist wirklich egal, es sei denn, der OP will die Verwendung der Funktionen von überlauf. Sorry meine verbage hatte die falsche Präzisions-Schraube.
    InformationsquelleAutor scrappedcola
Schreibe einen Kommentar