html - 标题 div 高度不计算， 'clear fix' 不工作？

Question

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

我的标题显示的高度值为 0，并且没有正确计算内容本身。我仔细阅读了一下，我知道这很可能是导航中的 float 元素(在本例中为 .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 hack 但没有结果(使用以下内容):

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

可以看到页面here

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

Answer 1

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

您的 header 保持为空，因为其中的每个子项都以不同的方式定位，无论是静态的还是相对的。

如果它们是 .header 的直接子级，则 float 可能是问题所在