Html 主体仅包括标题？
我有以下HTML代码：Html 主体仅包括标题？,html,google-chrome,Html,Google Chrome,我有以下HTML代码： <!DOCTYPE html> <html> <head> <title>Contest Coding</title> <meta charset = 'utf-8'> <meta name = 'description' content = 'The free programming competition for everyone'&g
<!DOCTYPE html>
<html>
<head>
<title>Contest Coding</title>
<meta charset = 'utf-8'>
<meta name = 'description' content = 'The free programming competition for everyone'>
<meta name = 'keywords' content = 'programming competition, coding competition, programming contest, coding contest, progrramming puzzles, coding puzzles, contestcoding, contest coding, c, c#, c++, python, ruby, java, javascript, php, haskell, perl, programming, coding'>
<meta name = 'author' content = 'Lewis Cornwall'>
<style type = 'text/css'>
body {
margin: auto;
width: 960px;
font-family: Helvetica, sans-serif;
font-size: 16px;
}
#header {
text-align: center;
}
#leaderboard {
float: left;
}
#leaderboard table {
width: 280px;
}
#puzzles {
float: right;
}
#puzzles table {
width: 640px;
}
.view_full {
line-height: 2em;
}
h1 {
font-size: 60px;
line-height: .5em;
}
table {
border-collapse: collapse;
background-color: lightgrey;
}
table, th, td {
padding: 10px;
border: 1px solid #000;
text-align: left;
}
a {
color: #000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id = 'header'>
<h1>CONTEST CODING</h1>
<p>The free programming competition for everyone</p>
</div>
<div id = 'leaderboard'>
<h2>Leaderboard</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href = ''>Ed Southall</a>
</td>
<td>20</td>
</tr>
<tr>
<td>
<a href = ''>Mark Bishop</a>
</td>
<td>20</td>
</tr>
<tr>
<td>
<a href = ''>Krishna Teja</a>
</td>
<td>18</td>
</tr>
</tbody>
</table>
<a href = '' class = 'view_full'>View full leaderboard »</a>
</div>
<div id = 'puzzles'>
<h2>Latest Puzzles</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Solved By</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href = ''>The Truck Driver - Click to View and Solve</a>
</td>
<td>0</td>
</tr>
<tr>
<td>
<a href = ''>The Eight Queens - Click to View and Solve</a>
</td>
<td>0</td>
</tr>
<tr>
<td>
<a href = ''>Palindromic Primes - Click to View and Solve</a>
</td>
<td>3</td>
</tr>
</tbody>
</table>
<a href = '' class = 'view_full'>View all puzzles »</a>
</div>
</body>
</html>
竞赛编码
身体{
保证金：自动；
宽度：960px；
字体系列：Helvetica，无衬线；
字体大小：16px；
}
#标题{
文本对齐：居中；
}
#排行榜{
浮动：左；
}
#排行榜表格{
宽度：280px；
}
#谜题{
浮动：对；
}
#拼图桌{
宽度：640px；
}
.查看完整{
线高：2米；
}
h1{
字体大小：60px；
线高：.5em；
}
桌子{
边界塌陷：塌陷；
背景颜色：浅灰色；
}
表，th，td{
填充：10px；
边框：1px实心#000；
文本对齐：左对齐；
}
a{
颜色：#000；
文字装饰：无；
}
a:悬停{
文字装饰：下划线；
}
竞赛编码
人人免费编程竞赛
排行榜
名称
要点
20
20
18
最新谜题
名称
解决者
0
0
3.
我在谷歌浏览器上运行了它。我右键单击，选择“Inspect Element”，单击主体部分（因此Chrome应该突出显示整个主体），但它只突出显示
#标题部分。为什么不突出显示整个页面？因为您忘记了“清除”浮动
<div style="clear: both;"></div>
将其添加到最后一个浮动div的末尾。它是因为“”。因此，我猜浏览器没有将浮动元素包含到
的正常内容中，因此它们不会突出显示
顺便说一句，它在Firefox的Firebug中的行为是相同的
body {
margin: auto;
width: 960px;
height:750px;
font-family: Helvetica, sans-serif;
font-size: 16px;
}
指定主体高度。上述内容应该可以解决您的问题。难道“检查元素”不关注您单击的精确项目吗？如果它总是检查整个文档，这将是一个完全没有意义的功能。浮动元素会发生这种情况：当你选择父元素时，Chrome通常无法在页面中突出显示它们。@Lewis我们回答了你的问题吗？如果是，请将答案标记为已接受。