我有web page）。它以HTML / CSS / JavaScript / Foundation / Bootstrap和w3.css编码。它有四个部分：导航栏和徽标，标题，定价表和页脚。如您所见，页脚的背景目前涵盖了定价表背景的一部分。你知道如何解决这个问题，以便页脚只在定价表之后开始吗？
以下是网页的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- BC_OBNW -->
<head>
<title>Home - Coding Kids</title>
<link href="/StyleSheets/ModuleStyleSheets.css" type="text/css" rel="StyleSheet" />
<script type="text/javascript">var jslang='EN';</script>
<link rel="stylesheet" type="text/css" href="stylesheets/w3.css">
<link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheets/foundation.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" type="text/css" href="stylesheets/marketing_nav.css">
<link href="/CatalystStyles/report_abuse.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/foundation.min.js"></script>
<script src="scripts/modernizr.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<span style="font-family : Raleway;">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" id="navbar-blue">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
</div>
<div align="center">
<p></p>
<p>
<img id="resize" width="70%" src="../logo.png" alt="Coding Kids">
</p>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/">Products<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Silver</a>
</li>
<li><a href="#">Silver+</a>
</li>
<li><a href="#">Gold</a>
</li>
<li><a href="#">Gold+</a>
</li>
</ul>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" data-toggle="modal" data-target="#signUp"><img src="images/register.png" width="20"> Sign Up</a>
</li>
<li><a href="#" data-toggle="modal" data-target="#logIn"><img src="images/login.png" width="20"> Login</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="signUp" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<p>Sign Up Box Goes Here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="logIn" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<p>Login Box Goes Here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="well">
<div class="container">
<div class="jumbotron" style="background: skyblue; font-famiy: Raleway;">
<h1>Learn Coding, The Easy Way...</h1>
<p>Coding Kids is a great way to learn programming, and it is fun and easy to use.</p>
</div>
</div>
<div class="col">
<div class="row medium-3 columns">
<div>
<ul class="pricing-table" data-equalizer-watch>
<li class="title">Silver</li>
<li class="price"><b>FREE</b> Forever!</li>
<li class="description">For kids who want to make websites</li>
<li class="bullet-item">HTML Tutorial</li>
<li class="bullet-item">Interactive Activities</li>
<li class="bullet-item">Real Time HTML Editor</li>
<li class="bullet-item">Ask Codey Coding Coding Support Service</li>
<li class="cta-button"><a class="a button" href="#" data-toggle="modal" data-target="#signUp">Sign Up</a></li>
</ul>
</div>
</div>
<div class="row medium-3 columns">
<div>
<ul class="pricing-table" data-equalizer-watch>
<li class="title">Silver+</li>
<li class="price">£10 once</li>
<li class="description">For kids who want to learn programming</li>
<li class="bullet-item">Scratch Tutorial</li>
<li class="bullet-item">Python Tutorial</li>
<li class="bullet-item">Tasks and Projects to Complete</li>
<li class="bullet-item">Everything in <b><i>Silver</i></b></li>
<li class="cta-button"><a class="a button" href="#" data-toggle="modal" data-target="#signUp">Sign Up</a></li>
</ul>
</div>
</div>
<div class="row medium-3 columns">
<div>
<ul class="pricing-table" data-equalizer-watch>
<li class="title">Gold</li>
<li class="price">£99.99 a year</li>
<li class="description">For Primary Schools</li>
<li class="bullet-item">Easy Scratch Tutorial with Tasks and Projects to Complete</li>
<li class="bullet-item">Easy Word and PowerPoint Tutorials</li>
<li class="bullet-item">Easy Esafety Lesson and Quiz</li>
<li class="bullet-item">Online Worksheets</li>
<li class="cta-button"><a class="a button" href="#" data-toggle="modal" data-target="#signUp">Sign Up</a></li>
</ul>
</div>
</div>
<div class="row medium-3 columns">
<div style="background-image: url(images/goldplus.jpg)">
<ul class="pricing-table" data-equalizer-watch>
<li class="title">Gold+</li>
<li class="price">£299.99 a year</li>
<li class="description">For Secondary Schools</li>
<li class="bullet-item">MSWLogo Tutorial and Cheatsheet</li>
<li class="bullet-item">Kodu Tutorial with Tasks and Projetcs to Complete</li>
<li class="bullet-item">Esafety Lesson and Quiz</li>
<li class="bullet-item">Online Worksheets</li>
<li class="bullet-item">Everything in <b><i>Silver</i></b> and <b><i>Silver+</i></b></li>
<li class="cta-button"><a class="a button" href="#" data-toggle="modal" data-target="#signUp">Sign Up</a></li>
</ul>
</div>
</div>
</div>
</div>
<footer
<div class="panel panel-default" style="background-color: black;">
<div class="panel-body" style="background-color: black; color: white;">© Coding Kids</div>
</div>
</footer>
</span>
<div id="report-abuse"><a href="http://www.businesscatalyst.com/report-abuse?URL=codingkids.businesscatalyst.com"><span>Report Abuse</span></a></div>
</body>
</html>
答案 0 :(得分：0)
您的定价部分使用浮动元素，因此您需要将css属性设置为以下元素（您的页脚）：
clear: both;
更好的是，添加一个div全宽，1px高度，并在与浮动元素相同的容器中清除两个css属性。