为什么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

只需从包装选择器中删除position: fixed和float: left：

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

Answer 3

将此CSS用于您的页脚类：

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

}

希望这会有所帮助，欢呼！