Question

我在学习HTML/CSS/PHP并在业余时间从头开始建立网站。

以下代码中的页脚位于我想要的底部，除非我使用content <div>，然后它会在内容的右侧拍摄。

我无法弄清楚为什么？！我已经评论了float: left，但这并没有什么不同。

感谢您的帮助。

style.css:

html {
font-family: sans-serif;
}

.wrap {
min-width: 600px;
width: 85%;
margin: auto;
float: left;
}

.navigation {
padding: 5px;
background: black;
text-align: center;
}

.navigation li {
display: inline;
padding-right: 10px;

}

.navigation a {
text-decoration: none;
color: white;
font-size: 20;
font-family: fantasy;

}

.navigation a:hover {
text-decoration: underline;

}

.content {
background: #f8f8f8;
float: left; 
width: 80%;
}


header {
text-align: center;
margin: auto;
}

header a {
text-decoration: none;
color: black;
}

h5 {
font-size: 120px;
font-family: cursive;
font-variant: small-caps;
margin-top: 10px;
margin-bottom: -100px;
text-shadow: 2px 1px 3px gray; 

 }

h6 {
font-size: 32px;
}

p {
padding-bottom: 10px;
}

的header.php：

<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <title></title>
</head>

<body>

<div class="wrap">

<header>
    <a href="/index.php"><img src = "/images/banner_logo.jpg"></a>

</header>


<div class="navigation">
    <ul>
        <li><a href="/index.php">Home</a></li>
        <!--<li><a href="/blog/index.php">Blog</a></li>-->
        <li><a href="/pics/index.PHP">Pics</a></li>
        <li><a href="/contact/index.php">Contact</a></li>
        <li><a href="/about/index.php">About</a></li>
        <li><a href="/produce/index.php">Produce</a></li>
    </ul>
</div>

footer.php：

<!--begin footer -->


<br><small>Copyright 2015</small>

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

index.php（含内容）：

<?php include "header.php"; ?>

<!--begin page content-->

    <h2>Welcome</h2>
    <div class="content">
        <p>Wander around and see if I've figured out what to do here.</p>


            <h4>Would you like to tell me you are here?</h4>
            <form action="process.php" method="post"> 

            First Name: <input name="fname" type="text" /> 
            <input type="submit" />
            </form> 




    </div>  
    <br>

Answer 1

您需要对页脚应用清除，因为您的.content元素已浮动。简单的方法是使用有意义的标记（例如<footer>）包装您的页脚内容，然后赋予此样式

footer {
  clear: both;
}

更精确的方法是使用直接应用于.clearfix元素的.content类as used in the html5 boilerplate，例如

.content:before,
.content:after {
    content: " ";  
    display: table;  
}

.content:after {
    clear: both;
}

Answer 2

在CSS的float: left部分中注释掉.content确实会将页脚强行放到下一行。请参阅：http://jsfiddle.net/Lu7w03mh/1/。

Answer 3

因为清除div是您经常遇到的常见问题，所以您可能希望创建一个实用程序类。

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

直接将它应用于div，或者有时候，你会发现你想在奇怪浮动的结尾处将它扔进div中。

<div class="clearfix"></div>

或

<div id="leftnav">
   ...
   <div class="clearfix"></div>
</div>

页脚停留在<div> </div>的右侧

3 个答案: