溢出：隱藏，清除：使用浮動後，兩者和清除修補程序都不起作用

我想使用html和css製作一個簡單的信息豐富的網站，並使用960網格作爲網站的圓柱結構。溢出：隱藏，清除：使用浮動後，兩者和清除修補程序都不起作用

當我將頭部h1浮動到左側（具有徽標圖像，我使用css將圖像添加爲背景）和右側的導航列表時，它下面的所有內容都會浮起來，並在使用後溢出：隱藏，它不清除浮動。我已經嘗試了960網格的明確修復類，也明確：兩者。但他們也沒有工作。

那麼請告訴我我做錯了什麼。

這是CSS

/**** =header ****/ 
header { 
    overflow: hidden; 
} 

header h1 { 
    background: url(../img/logo.png) no-repeat; 
    text-indent: -9999px; 
    height: 23px; 
    width: 174px; 
    float: left; 
} 

/**** =nav ****/ 

nav { 
    float: right; 
} 

nav li { 
    display: inline; 
} 

/**** =banner ****/ 

.banner { 
    background: url(../img/city-bg.jpg) no-repeat; 
    width:695px; 
    height:231px; 
} 

.callout { 
    background: black; 
    height: 231px; 
}

這是HTML

<html> 
<head> 
    <meta charset="utf-8" /> 
    <titel></title> 
    <link rel="stylesheet" href="css/reset.css"> 
    <link rel="stylesheet" href="css/text.css"> 
    <link rel="stylesheet" href="css/960_12_col.css"> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body > 
    <div class="container_12"> <!--start container - using the 960 grid--> 
     <header> 
      <h1>White + Black</h1> 
      <nav> 
       <ul> 
        <li><a href="home.html">home</a></li> 
        <li><a href="ourservices.html">Our Serices</a></li> 
        <li><a href="howwework.html">How We Work</a></li> 
        <li><a href="testimonials.html">Testimonials</a></li> 
        <li><a href="workexamples.html">Work Examples</a></li> 
       </ul> 
      </nav> 

      <div class="banner gird_10"> 
       <p> 
        some text some text some text some text some text 
       </p> 
      </div> 
      <div class="grid_2 callout"></div> 
     </header> 

     <div class="main"> 
      <div class="grid_5"> 
       <h3>serices we offer</h3> 
       <p> 
        some text some text some text some text some text some text some text some text some text 
       </p> 
       <p> 
        some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text 
       </p> 
       <p><a href="#" class="button">Read More</a></p> 
      </div> 

      <div class="grid_5"> 
       <h3>how we work</h3> 
       <p> 
        some text some text some text some text some text some text some text some text some text 
       </p> 
       <p> 
        some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text 
       </p> 
       <p><a href="#" class="button">Read More</a></p> 
      </div> 
     </div> 
     <div class="grid_2"> 
      <blockquote> 
       <p> 
        some text some text some text some textsome text some text some text some text 
       </p> 
      </blockquote> 
     </div> 

     <footer> 
      <p><strong>black + white</strong> themes via <a href="www.themeforest.net">themeforest</a></p> 
     </footer> 
    </div> <!--end container--> 
</body>

來源

2015-10-22 user3710571

我通常做的是什麼創建一個類的.clear：

.clear { 
    clear:both; 
}

而且把它放在漂浮的元素之後。在nav後，這種情況下，我想是這樣的：

<h1>Title</h1> 
<nav> 
    <!-- nav elements --> 
</nav> 
<div class="clear"></div>

但是，如果你有.clearfix類，使用它。

來源

2015-10-22 16:33:03

試試這個https://jsfiddle.net/2Lzo9vfc/4/

HTML

<div class="container_12"> <!--start container - using the 960 grid--> 
    <header> 
    <div class="navigation"> 

     <h1>White + Black</h1> 

     <nav> 
      <ul> 
       <li><a href="home.html">home</a></li> 
       <li><a href="ourservices.html">Our Serices</a></li> 
       <li><a href="howwework.html">How We Work</a></li> 
       <li><a href="testimonials.html">Testimonials</a></li> 
       <li><a href="workexamples.html">Work Examples</a></li> 
      </ul> 
     </nav> 
    </div> 

    <div class="banner gird_10"> 
     <p> 
      some text some text some text some text some text 
     </p> 
    </div> 

    <div class="grid_2 callout"></div> 
</header> 

    <div class="main"> 
     <div class="grid_5"> 
      <h3>serices we offer</h3> 
      <p> 
       some text some text some text some text some text some text some text some text some text 
      </p> 
      <p> 
       some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text 
      </p> 
      <p><a href="#" class="button">Read More</a></p> 
     </div> 

     <div class="grid_5"> 
      <h3>how we work</h3> 
      <p> 
       some text some text some text some text some text some text some text some text some text 
      </p> 
      <p> 
       some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text 
      </p> 
      <p><a href="#" class="button">Read More</a></p> 
     </div> 
    </div> 
    <div class="grid_2"> 
     <blockquote> 
      <p> 
       some text some text some text some textsome text some text some text some text 
      </p> 
     </blockquote> 
    </div> 

    <footer> 
     <p><strong>black + white</strong> themes via <a href="www.themeforest.net">themeforest</a></p> 
    </footer> 
</div> <!--end container-->

CSS

nav { 
    float: right; 
    display: inline-block; 
    vertical-align: middle; 
    padding: 30px 0; 
} 

header h1 { 
    float: left; 
    display: inline-block; 
    vertical-align: middle; 
} 

nav li { 
    display: inline; 
} 

/**** =banner ****/ 

.banner { 
    background: url(../img/city-bg.jpg) no-repeat; 
    width:695px; 
    height:231px; 
} 

.callout { 
    background: black; 
    height: 231px; 
} 

.navigation { 
    clear:both; 
    height: 100px; 
}

來源

2015-10-22 17:07:18

謝謝，它的工作 – user3710571

很高興我可以幫助，如果這有助於您，請接受答案。 –

您對標記一個錯字爲您的旗幟容器：<div class="banner gird_10">

解決這個問題（以grid_10）你的問題應該解決：）

來源

2015-10-25 23:22:39

溢出：隱藏，清除：使用浮動後，兩者和清除修補程序都不起作用

回答

相關問題