私はfloatを利用すると、私のul要素が消えてしまったのですが、CSSで正しい権利がありますか？

Question

CSSでfloat: rightプロパティを使用すると、私のul要素が消えるのはなぜですか？

私はこのウェブサイトのナビゲーションを構築しています。

あなたはここにCodePenのコード見つける：

https://codepen.io/maximo890/pen/JygeVr

CSS

/*-----------------------------------*/ 
/* HEADER */ 
/*-----------------------------------*/ 

header { 
    background-color: #de654e; 
} 

.logo-link h1 { 
    font-family: "lobster", sans-serif; 
    font-size: 42px; 
    padding: 2% 0 2% 6%; 
    display: inline-block; 
    } 

.menu-navigation li { 
    display: inline-block; 
    float: right; 
    color: #fff; 
} 

Answer 1

私はあなたがそれは未来が応答行動のための素晴らしい作品にありますよう、できるだけ多くのフレックスプロパティを使用することをお勧めします。

<header> 
     <nav> 

      <a href="#" class="logo-link"><h1>Creative</h1></a> 
      <ul><li>... 

だから、あなたはこれを試すことができます：私はあなたが右に左のナビゲーション上のロゴを持っているし、あなたのHTMLが似ている、ヘッダに参照電流の

nav { 
display: flex; 
justify-content: space-between; 
} 

Answer 2

を使用すると、要素のすべての子にフロートプロパティを追加するときにその理由があります、親は高さを持たないので、リンクはヘッダー外に表示され、リンクはページの背景と混ざります。

overflow:auto 

をしかし、私はフレキシボックスやレイアウトを構築するために、インライン・ブロックを使用してのような他の技術を使用することをお勧めいたしますでしょう：この問題を解決するには、メニュー・ナビゲーションこれに追加することができます。

現在の山車の詳細情報を読むことができます： https://css-tricks.com/all-about-floats/#article-header-id-3