header div 身高不计算，'clear fix' 不工作？

Question

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

我的 header 显示的高度值为 0，并且未正确计算内容本身。我仔细阅读了一下，我知道这很可能是导航中的浮动元素（在本例中为 .desktoplinkitem）。

我的header代码如下：

<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 保持空白，因为它里面的每个 child 都以不同的方式定位，无论是静态的还是相对的。

如果它们是 .header

的直接 child，则浮动可能是问题所在

header div 身高不计算，'clear fix' 不工作？

header div height not calculating, 'clear fix' not working?

html

css

clearfix