header 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が同様にスタイル設定され：ノー結果（以下を使用）でclear fixハックを追加しようとしました

.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; 
} 

：

.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から削除して修正しました。

あなたの中のすべての子が静的または相対的な方法で配置されているため、ヘッダーは空のままです。 absolute`と、これは私のナビゲーション要素が今 `.logo`要素の下に移動させています：彼らは.header