我将徽标和H1文本浮动在左侧的标题中。我确保清除中殿酒吧中的那些浮标，但是发生了一些奇怪的事情，应该应用于标题的渐变消失了。有人知道为什么吗？
这是我的 html 的一个片段：
<body>
<div class="contentwrapper">
<!-- beginning of header element -->
<div class="gradientheaderfooter">
<header class="banner" role="banner">
<img src="images/GoodKarmaBikes_LogoRGB_Web.jpg" alt="Good Karma Bikes GKB Logo">
<h1>Good Karma Bikes</h1>
</header>
</div>
</body>
这是我的 css 的一个片段：
body {
background-image: url(../images/GKBBackground_Gradient1.png);
background-repeat: repeat-x;
}
.contentwrapper {
max-width: 1366px;
margin: 0 auto;
outline: 1px solid #333333;
}
.gradientheaderfooter {
background-image:
linear-gradient(
to bottom,
silver, green 90%
);
}
.banner {
}
.banner img{
float: left;
}
.banner h1{
float: left;
font-size: 6em;
text-align: center;
}
我把这些代码放到jsfiddle中，但徽标不会出现。以下是jsfiddle的链接：
http://jsfiddle.net/shihfa/haqkbgq4/
感谢您的帮助！
我的意思不是说问一个问题，然后自己回答，显得傲慢。但是我从我的教授那里得到了答案，我想有人可以使用这个问题的解决方案。
将代码更改为以下内容：
/* === Eliminate the div class below === */
.gradientheader {
}
/* === Eliminate the div class above === */
.banner {
background-image:
linear-gradient(
to bottom,
silver, green 90%
);
overflow: hidden;
}
/* === Add "overflow: hidden;" above. When you float elements inside of another element, the
parent element collapses and does not acknowledge the existence of the child floated elements.
"overflow: hidden" on the parent element is one way to contain the floats. === */
.banner img{
float: left;
margin: 0 40px 0 0;
}
.banner h1{
float: left;
font-size: 6em;
text-align: center;
}
.banner {
overflow:hidden;
}
将其添加到您的 CSS 中。