这里有HTML的初学者。我的HTML脚本出现了一个非常时髦的错误。当我显示它时，页脚看起来像一个内联元素的格式。它显示在我的时间轴一侧而不是页面底部。
这是一个截屏： Webpage Screenshot
以下是代码：
<DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>About Mangetsu Budogu</title>
<style>
/*Total Body width must be greater than widths for content */
/*global scope css */
body{
width: 1080px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
.main_content{
float: left;
width: 620px;
margin: 10px;
}
/* Nav Bar CSS */
nav {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
border-radius: 25px;
width: 99%;
text-align: center;
}
nav a{
float: center;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover{
background-color: red;
}
nav li{
display: inline;
padding: 5px;
}
/* Timeline */
.timeline{
float: left;
width: 300px;
margin: 10px;
}
li{
margin: 10px 0;
}
/* Main Content*/
#main_heading{
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
footer {
display: block;
}
</style>
</head>
<header>
<center><img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/7/76/Sakai_Kamon.svg" width="200" height="200"/></center>
<nav>
<ul id="nav_li">
<li><a href="http://www.hawkeyekendo.com/home">Home</a></li>
<li><a href="https://www.hawkeyekedo.com/about">About</a></li>
<li><a href="../../test">Products</a></li>
<li><a href="../Classes">Classes</a></li>
<li><a href="../contact">Contact</a></li>
</ul>
</nav>
</header>
<body>
<h1 id="main_heading">About Mangetsu Budogu</h1>
<article class="main_content">
<h2>Beginnings</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Praesent posuere felis non turpis venenatis porta. Ut vel ultrices ipsum, vel blandit ipsum. Fusce rhoncus eget mauris ut pellentesque. Aenean condimentum lacus aliquam tristique efficitur. Nam commodo mattis dolor id molestie. Nulla molestie, magna suscipit gravida placerat, tortor libero faucibus risus, ac lacinia lacus metus at ex. Integer auctor sollicitudin quam, in gravida diam rhoncus non. Praesent lacinia velit est, et efficitur velit lobortis quis. Donec eleifend gravida sem aliquet finibus. Duis tempus, orci vel blandit luctus, sem sapien rhoncus enim, eu consequat ex mauris posuere augue. Etiam mi sem, scelerisque sit amet dictum eget, eleifend id urna. Fusce non condimentum dui, vel rhoncus nisl. Sed lacinia dui non lacinia mollis. Maecenas sodales lorem et est sodales molestie.
</p>
<p>
Nam et ipsum ac est ornare mattis. Mauris aliquet consequat lorem id lacinia. Nunc vulputate mollis bibendum. Duis sed enim a turpis mollis consectetur vitae vel mi. Phasellus quis lectus velit. Morbi vel libero pulvinar tortor placerat placerat. Suspendisse id ante leo. Etiam eu facilisis enim. Cras lorem tellus, bibendum eget turpis vitae, porta blandit lorem. Nam ut dui eu mauris malesuada ultricies. Cras nec erat dictum, ultricies sem non, vestibulum arcu. Fusce varius imperdiet nulla eu convallis. Curabitur quis mattis felis, non pretium ex. </p>
<h2>The 1990s Era</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere felis non turpis venenatis porta. Ut vel ultrices ipsum, vel blandit ipsum. Fusce rhoncus eget mauris ut pellentesque. Aenean condimentum lacus aliquam tristique efficitur. Nam commodo mattis dolor id molestie. Nulla molestie, magna suscipit gravida placerat, tortor libero faucibus risus, ac lacinia lacus metus at ex. Integer auctor sollicitudin quam, in gravida diam rhoncus non. Praesent lacinia velit est, et efficitur velit lobortis quis. Donec eleifend gravida sem aliquet finibus. Duis tempus, orci vel blandit luctus, sem sapien rhoncus enim, eu consequat ex mauris posuere augue. Etiam mi sem, scelerisque sit amet dictum eget, eleifend id urna. Fusce non condimentum dui, vel rhoncus nisl. Sed lacinia dui non lacinia mollis. Maecenas sodales lorem et est sodales molestie.
</p>
</article>
<div class="timeline">
<h3>Mangetsu Budogu Timeline</h3>
<ul>
<li><time>1991</time>: Established Flagship Store in <strong>Kyoto, Japan, Nishijin District</strong></li>
<li>1995: Created first Kendogu Website in Japan</li>
<li>1997: Establishment of 2nd Store in <strong>Shinagawa District, Tokyo</strong></li>
<li>1999: Creation of the Mangetsu Budogu Reward Points</li>
<li>2001: Establishment of 3rd Store in <strong>Nakamura District, Nagoya</strong></li>
<li>2010: Creation of the Shingsengumi Line of Bogu</li>
<li>2011: First Overseas Store in Los Angeles, California</li>
</ul>
</div>
<footer>
© Mangetsu Budogu 2018
</footer>
</body>
</html>
答案 0 :(得分：0)
您需要清除已分配给<article class="main_content">和<div class="timeline">的浮动属性。只需在footer之前添加此元素。
<div style="clear:both;"></div>
答案 1 :(得分：0)
您的<button onclick="myFunction(1)">Test1</button>
<button onclick="myFunction(2)">Test2</button>
<button onclick="myFunction(3)">Test3</button>
<button onclick="myFunction(4)">Test4</button>和.main_content是浮动元素，不会覆盖整个身体宽度，这就是为什么页脚显示在旁边的原因（＆＃＆} 34;浮动＆＃34;浮动元素旁边。）
要避免这种情况，请将timeline添加到clear: both CSS