标题div高度未计算，"清除修复"不起作用？

Question

我目前正在对我的网站进行一些重新设计，遇到了一个关于标头div元素和一些具有float:属性的子元素的小问题。

我的页眉显示的高度值为0，并且没有正确计算内容本身。我已经阅读了一些内容，我知道这很可能是导航中的浮动元素(在本例中为.desktoplinkitem)。

我的头代码如下：

<div class="header videohead">
<div class="mobile-nav">
<div class="mobile-link-container">
<div class="mobile-links">
<li class="linkitem"><a href="homepage">Video</a></li>
<li class="linkitem"><a href="stills">Stills</a></li>
<li class="linkitem"><a href="about">About</a></li>
<li class="linkitem"><a href="emaillink">Contact</a></li>                            </div>
</div>
</div>
<div class="name logo">Name<br>Title</div>
<div class="right-nav">
<button class="mobilemenu mobilemenu--htx">
<span></span>
</button>
<div class="desktop-nav">
<ul>
<li class="desktoplinkitem"><a href="email-link">Contact</a></li>
<li class="desktoplinkitem"><a href="about.php">About</a></li>
<li class="desktoplinkitem"><a href="link">Stills</a></li>
<li class="desktoplinkitem"><a href="home">Video</a></li>                </ul>
</div>
</div>
</div>

CSS的样式如下：

.header {
width: 100%;
position: absolute;
top: 0;
z-index: 600;
flex: none;
}
.videohead {
display: inline-block;
}
.desktoplinkitem {
visibility: inherit;
color: inherit;
background: none !important;
}
.linkitem {
visibility: inherit;
color: #FFFFFF;
transform: scale(2, 2) translateX(-100px);
opacity: 0;
}
.right-nav {
position: absolute;
right: 0%;
padding: 35px;
color: #000000;
text-decoration: none;
}
.right-nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
float: right;
}
.right-nav li { 
display: inline; 
padding-top: 1em;
padding-bottom: 1em;
padding-left: 1em;
letter-spacing: 1px;
float: right;
}

我试图添加一个clear fix破解，但没有结果(使用以下内容)：

.videohead:after { 
content: " ";
display: table; 
height: 0; 
clear: both;
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

页面可以在这里看到

有其他方法可以解决这个问题吗？

Answer 1

通过从.logo中删除position: absolute;来修复。

头保持为空，因为它内部的每个子对象都以不同的方式定位——静态或相对。

如果他们是.header的直接子代，那么浮动可能就是问题所在