CSS Clearが動作しないのはなぜですか？

Question

私のCSSファイルには奇妙な問題がありますが、それはうまくいきません。私もclearfixコードを使用しましたが、ヘッダーセクションにはフッターがあります。 （私はstackoverflowの問題のすべてのこの種のを読んだことがあるが、解決策を取得できませんでした。）

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
/*top navigation*/ 
 

 
/*logo image div*/ 
 

 
#wrapper { 
 
    float: left; 
 
    width: 100%; 
 
    height: 78px; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    position: fixed; 
 
} 
 
.logo { 
 
    float: left; 
 
    width: 15%; 
 
} 
 
.logo img { 
 
    width: 100%; 
 
    height: 78px; 
 
} 
 
/*================================================================*/ 
 

 
/*menu div*/ 
 

 
.navigation { 
 
    text-align: center; 
 
    width: 85%; 
 
} 
 
nav li { 
 
    list-style-type: none; 
 
    float: left; 
 
} 
 
.navigation > li { 
 
    position: relative; 
 
} 
 
.navigation li ul { 
 
    position: absolute; 
 
} 
 
.navigation li ul li { 
 
    width: 100%; 
 
} 
 
div.navigation a { 
 
    text-decoration: none; 
 
    padding: 30px; 
 
    background-color: transparent; 
 
    color: blue; 
 
    display: block; 
 
} 
 
div.navigation a:HOVER { 
 
    background: rgba(255, 0, 0, .6); 
 
    color: white; 
 
} 
 
nav > ul > li:FIRST-CHILD { 
 
    margin-left: 300px; 
 
} 
 
/*sub navigation menu*/ 
 

 
nav li ul { 
 
    display: none; 
 
} 
 
nav li:HOVER ul { 
 
    display: block; 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 
/*================================================================*/ 
 

 
/*div footer*/ 
 

 
div.footer { 
 
    clear: both; 
 
    border: thin solid red; 
 
} 
 
.clearfix:after { 
 
    content: "."; 
 
    visibility: hidden; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
}

<div id="wrapper"> 
 
    <div class="logo"> 
 
    <img alt="logo image" src="../images/logo.png"> 
 
    </div> 
 

 
    <div class="navigation"> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#">ABOUT</a> 
 
      <ul> 
 
      <li><a href="#">Item 1a</a> 
 
      </li> 
 
      <li><a href="#">Item 1b</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">MENU</a> 
 
     </li> 
 
     <li><a href="#">ORDER</a> 
 
     </li> 
 
     <li><a href="#">NEWS</a> 
 
     </li> 
 
     <li><a href="#">CONTACT</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div> 
 

 
<div class="clearfix">class clear fix</div> 
 
<div class="footer">this is footer section</div> 
 
<p>this is para. footer section</p>

Answer 1

この

#wrapper { 
/* float: left; comment this line */ 
    width: 100%; 
    height: 78px; 
    background: rgba(0, 0, 0, 0.5); 
/* position: fixed; comment this line */ 
} 

@CHARSET "ISO-8859-1"; 
 

 
* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
/*top navigation*/ 
 
/*logo image div*/ 
 
#wrapper { 
 
/* float: left; */ 
 
    width: 100%; 
 
    height: 78px; 
 
    background: rgba(0, 0, 0, 0.5); 
 
/* position: fixed; */ 
 
} 
 

 
.logo { 
 
    float: left; 
 
    width: 15%; 
 

 
} 
 

 
.logo img { 
 
    width: 100%; 
 
    height: 78px; 
 

 
} 
 

 
/*================================================================*/ 
 

 
/*menu div*/ 
 

 
.navigation { 
 

 
    text-align: center; 
 
    width: 85%; 
 
} 
 

 
nav li { 
 
    list-style-type: none; 
 
    float: left; 
 

 
} 
 

 
.navigation > li { 
 
    position: relative; 
 

 
} 
 

 
.navigation li ul { 
 
    position: absolute; 
 

 
} 
 

 
.navigation li ul li { 
 
    width: 100%; 
 
} 
 

 
div.navigation a { 
 
    text-decoration: none; 
 
    padding: 30px; 
 
    background-color: transparent; 
 
    color: blue; 
 
    display: block; 
 

 
} 
 

 
div.navigation a:HOVER { 
 
    background: rgba(255, 0, 0, .6); 
 
    color: white; 
 
} 
 

 

 

 
nav > ul > li:FIRST-CHILD { 
 
    margin-left: 300px; 
 

 
} 
 

 
/*sub navigation menu*/ 
 
nav li ul { 
 
    display: none; 
 
} 
 

 
nav li:HOVER ul { 
 
    display: block; 
 
    background: rgba(0, 0, 0, 0.5); 
 

 
} 
 

 
/*================================================================*/ 
 

 
/*div footer*/ 
 
div.footer { 
 
    clear: both; 
 
    border: thin solid red; 
 
} 
 

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

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="logo"> 
 
     <img alt="logo image" src="../images/logo.png" > 
 
    </div> 
 

 
    <div class="navigation"> 
 
     <nav> 
 
      <ul> 
 
       <li><a href="#">ABOUT</a> 
 
        <ul> 
 
         <li><a href="#">Item 1a</a></li> 
 
         <li><a href="#">Item 1b</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">MENU</a></li> 
 
       <li><a href="#">ORDER</a></li> 
 
       <li><a href="#">NEWS</a></li> 
 
       <li><a href="#">CONTACT</a></li>     
 
      </ul> 
 
     </nav> 
 
    </div> 
 
</div> 
 

 
<div class="clearfix">class clear fix</div> 
 
<div class="footer">this is footer section</div> 
 
<p>this is para. footer section</p>

Answer 2

をお試しください

このCSを使用するこれが役立つ

.footer{ 
position: absolute; 
bottom: 0; 
left: 0; 
right: 0; 
height:100px; 
background:#ccc; 

}

希望、歓声：あなたのフッタークラスのS！

Answer 3

ちょうどあなたのラッパーセレクタからposition: fixedとfloat: leftを削除します。

#wrapper { 
    /*float: left;*/ 
    width: 100%; 
    height: 78px; 
    background: rgba(0, 0, 0, 0.5); 
    /*position: fixed;*/ 
}