css - コンテナーの境界線は、コンテナー全体ではなく、ヘッダーとナビゲーションのみをラップします

Question

コンテナー全体を 1px の実線の境界線でラップしようとしていますが、ヘッダーとナビゲーションのみをラップします。

フロートが問題のように感じますが、よくわかりません。

別の方法で何をする必要があるかを理解してくれる人はいますか? その他の批判も大歓迎です。

PS私は、インターネットで見つけたチュートリアルを使用して、.PSDをHTMLに変換しようとしています。これは私が見つけたものです。

score 1 · Accepted Answer

#container 定義に追加overflow: hiddenします。

#container {
    width: 1000px;
    margin: 0 auto;
    border: 1px solid black;
    overflow: hidden;
}

フローティング要素は、ページ上のブロックレベル要素の通常のフローから削除されるため、overflow 属性を追加すると、親の高さに子がフローティングされていないかのように含まれます。

score 0 · Accepted Answer

フローティングをクリアするのを忘れただけです。<div style="clear: both;"></div> コンテナ div の最後にdiv likeを配置します。

動作したら、そのような clear という名前のクラスを作成し、フローティングをクリアするために使用できます

.clear {clear: both;}

チュートリアルでフロートについて勉強すれば、それをたくさん使うでしょう。

2 に答える 2