Question

HTML正文中的图片元素似乎不会包含在正文中，而新元素会将其推向页面，如<footer>标记所示：

footer floating to the top 。

将高度/最小高度设置为100％无效。 HTML验证器出现的唯一问题是图片没有替代文字。

＆＃13;

html,body {
  margin:0px;
  background-image: url("bilder/curtains.jpg");
  background-size:auto; 
}

body {
  border:solid 1px orange;
  min-height:100%;
}

header {
  font-family:Cinzel;
  height:75px;
  background-color:black;
  color:#fff;
  border-bottom: 4px dotted white;
  box-shadow: inset 0 -1px 0 0 #e5e5e5, inset 0 1px 0 0 #e5e5e5, 0 1px 0 0 #e5e5e5, 0 -1px 0 0 #e5e5e5;
  color:#e5c006;
  margin-bottom:50px;
}

header img {
  float: left;
  margin-right: 1em;
}

header h1 {
  margin: 0px;
}

header h3 { 
  margin: 0px;
}

nav {
  position: absolute;
  top:25px;
  right:2em;	
}

nav ul {
  margin: 0px;
}

nav li {
  display: inline-block;
  margin:5px;
}

nav a {
  text-decoration: none;
  color:#fff;
}

nav a:hover {
  transition: width 5s, height 4s;
  color:#e5c006;
}

.poster_container {
  display:inline-block;
  z-index:-1 ;
  padding:0;
  margin:auto;
  height:130%;
  background-color:black;
  position:relative;
  width:130%;
  left:-15%;
  top:-15%;
  border: 3px solid gold;	
}

#theater_1 {
  float:left;
  text-decoration:none;
  color:gold;
  width:30%;
  height:500px;
  margin:50px;
  text-align:center;
  background-image: url('bilder/it_movie_poster.jpg');
  background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  margin-left:10%;
  border:2px solid gold;	
}

#theater_2 {
  float:right;
  width:30%;
  height:500px;
  margin:50px;
  color:gold;
  text-align:center;
  background-image: url('bilder/the_big_sick_movie_poster.jpg');
  background-position: center;
    background-repeat: no-repeat;
  background-size: 100%;
  margin-right:10%;
  border:2px solid gold;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
    <title>The Pop Theater</title>
  <link rel = "stylesheet" type = "text/css" href = "pracstyle.css"/>
  <link rel="shortcut icon" href="title_image_2.ico"/>
  </head>
  <body>
  <header>
    <a href="home.html"><img src="#" /></a>
    <h1>The Practice Theater</h1>
    <h3>Entertaining the Beverly Hills since 1776</h3> 
    <nav>
      <ul>
        <li><a href="home.html">Now Showing</a></li>
        <li><a href="coming_soon.html">Coming Soon</a></li>
        <li><a href="history.html">History</a></li>
        <li><a href="#">Deals</a></li>
        <li><a href="advertise.html">Advertise Here!</a></li>
      </ul>
    </nav>
  </header>
  <a href="theater_1.html">
    <div id="theater_1">
      <div class="poster_container">
      </div>
    </div>
  </a>
  <a href="theater_2.html">
    <div id="theater_2">
      <div class="poster_container">
      </div>
    </div>
  </a>
  <footer>
    <h2>THE FOOTER APPEARS HERE</h2>
  </footer>
  </body>
</html>

＆＃13;

Answer 1

当项目浮动时，它们会从文档的其余部分流出，并且会给你带来奇怪的结果。

最简单的解决方案是向页脚添加一个清除。清楚或多或少告诉元素清除浮动项目，或者在它们下面而不是在它们之下。

footer {
  clear: both;
}

为了更好地控制事物，我建议您查看clearfix。

Answer 2

您还可以将overflow属性用于包含auto, visible和hidden选项的父元素。

为什么我的页脚浮动到顶部？

2 个答案: