Question

我正在创建一个网站，看起来页脚无法正确显示在页面底部。

这是我的HTML源代码

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<title>MyTitle</title>
<body>

<div id="main">
    <header>
      <div id="logo">
        <div id="logo_text">
          <!-- class="logo_colour", allows you to change the colour of the text -->
          <h1><a href="index.html">My<span class="logo_colour">Title</span></a></h1>
          <h2>Fast. Colorful. What</h2>
        </div>
        <p style="float: right;"><img src="images/twitter.png" alt="twitter" />&nbsp;<img src="images/facebook.png" alt="facebook" />&nbsp;<img src="images/rss.png" alt="rss" /></p>
      </div>
      <nav>
        <ul class="sf-menu" id="nav">
          <li class="selected"><a href="index.php">Home</a></li>
          <li><a href="main.php"><font color="red"> Start  </font></a></li>
          <li><a href="main.php"><font color="DodgerBlue "> Folio </font></a></li>
          <li><a href="contact.php">Contact Us</a></li>
        </ul>
      </nav>
    </header>

<!-- Setting the Date    -->

<?php
    $showDate = date("Y.m.d");
    echo "<font size = '5' color = 'aqua'> ".", " . $showDate . "</font>"  . "<br>";
?>

<!-- Print Word 1 -->
<div class = "column">
<h1>Word 1</h1>
</div>

<!-- Print Word 2 -->
<div class = "column">
<h1>Word 2</h1>
</div>

<!-- Print Word 3 -->
<div class = "column">
<h1>Word 3</h1>
</div>

<!-- Print Word 4 -->
<div class = "column">
<h1>Word 4</h1>
</div>

<footer>
      <p>Copyright &copy; photo_bw | <a href="http://www.heartinternet.co.uk/dedicated-servers/">Dedicated servers</a> | <a href="http://www.css3templates.co.uk">design from css3templates.co.uk</a></p>
</footer>

</div>
</body>
</html>

这是我的CSS文件：

html { 
  height: 100%;
}

article, aside, figure, footer, header, hgroup, nav, section { 
  display:block;
}

body { 
  font: normal .85em 'Droid Sans', arial, sans-serif;
  background: #2E2E2E url(../images/pattern.png);
  color: #444;
}

p { 
  padding: 0 0 20px 0;
  line-height: 1.7em;
}

#main, nav, #container, #logo, #site_content, footer { 
  margin-left: auto; 
  margin-right: auto;

}

#main {
  margin: 0 auto;
  width: 930px;
  background: transparent;
  padding-bottom: 30px;
}

header { 
  margin: 20px 0 25px 0;
  height: 150px;
}

nav { 
  height: 44px;
  width: 930px;
  float: right;
  margin: 0 auto 0 auto;
  color: #222;
  background: #404040;
} 

footer { 
  width: 928px;
  font: 100% 'Droid Sans', arial, sans-serif;
  height: 30px;
  padding: 9px 0 15px 0;
  color: #FFF;
  text-align: center;
}

.column {
    float: left;
    margin: 8px;
}

footer p { 
  line-height: 1.7em;
  padding: 0 0 10px 0;
}

footer a { 
  color: #FFF;
  text-decoration: underline;
}

footer a:hover { 
  color: #FFF;
  text-shadow: none;
  text-decoration: none;
}

设置

后会出现页脚问题

    .column {
    float: left;
    margin: 8px;
}

这样单词（单词1，单词2，..）将出现在彼此旁边，但即使我结束了带有页脚的单元格仍然出现在单词4旁边。我如何才能使它成为单词4应该是页面的底部？告诉我，如果我遗漏任何CSS元素，因为我只采取我认为重要的。

感谢。

Answer 1

您可以通过将clear: both;添加到footer元素向下移动以清除左右浮动点来解决此问题。

JSFiddle - DEMO

footer { 
  clear: both;
  width: 928px;
  font: 100% 'Droid Sans', arial, sans-serif;
  height: 30px;
  padding: 9px 0 15px 0;
  color: #FFF;
  text-align: center;
}

更多信息：

Mozilla MDN - CSS clear property

HTML页脚将无法正确显示

1 个答案: