我想让我的导航栏看起来像这样 
但到目前为止，这就是我到目前为止所做的，当我尝试将 Logo float 到左侧时，标题背景消失了。我很困惑为什么会这样？
*{margin: 0;padding: 0;}
img, fieldset{border: 0; }
img{vertical-align: middle}
h1,h2,h3,h4,h5,h6{font-weight: normal;}
.site-body, .site-header-outer, .site-header, .tag{
width: 58.7em;
margin:auto;
}
*{margin: 0;padding: 0;}
img, fieldset{border: 0; }
img{vertical-align: middle;}
h1,h2,h3,h4,h5,h6{font-weight: normal;}
.site{
width: 58.7em;
margin:auto;
}
/*Header*/
.header{
background-color:#3088f0;
}
.Logo{
background-color: #f07a30;
float: left;
color: #ffffff;
}<!DOCTYPE HTML5>
<html>
<head>
<title>The Title</title>
<link href="css/stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="site">
<h1>
<div class="header">
<div class="Logo">Vatpaints.tk</div>
</div>
</h1>
<div class="navigation"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
</html>最佳答案
当使用 overflow:hidden; 时，还可以考虑添加 width: 100%;。对于某些浏览器，没有宽度的解决方案不起作用。
您的问题的另一个解决方案是清除 float 。您可以通过添加一个 html 元素作为元素在其中 float 的容器的最后一个子元素来实现。通过添加 style="clear: both;" 作为最后一个子项的属性，使用内联 CSS 清除 float ，或者更好地使用 css 类。
使用内联 CSS
<div class="header">
<div class="Logo">Vatpaints.tk</div>
<div style="clear: left;"></div>
</div>
使用 CSS 类
<style>
.clear{
clear: left;
/* clear: right; */
/* clear: both; */
}
</style>
<div class="header">
<div class="Logo">Vatpaints.tk</div>
<div class="clear"></div>
</div>
关于html - 仅使用 Css 将 Logo 向左浮动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31053637/