web-dev-qa-db-ja.com

float：leftを使用するとCSSの背景が消える

これは私のhtmlです：

<div class="header_wrapper">
       <div class="main_nav">
       <div>TEst</div>
       <div>TEst</div>
       <div>TEst</div>
    </div>
    <div class="clear"></div>
</div>

ご覧のとおり、フローティングdivでメニューを作成したいと思います。そうすると、main_navの背景が消えます。

.header_wrapper{

    height:129px;
    background:url('images/layout/header.png') no-repeat #1f1f1f;
    border-bottom:1px solid #1f66ad
}

.header_wrapper .main_nav{
    position:relative;
    top:77px; left:336px;
    width:750px;
    background:red;
}

.header_wrapper .main_nav div{
    float:left;
}

.clear{
    clear:both;
}

Clear：bothを使用しようとしましたが、背景がまだ消えています。何かアイデアはありますか？

htmlcsscss-float
21
Upvote

Main_navにoverflow:auto;を追加すると、背景が元に戻ります。

63
j08691

これは、フロートコンテンツがスペースを占有しないためです。あなたの親main_div分割には、背景を「隠す」他のコンテンツがないため、基本的に高さが0になります（背後に表示する高さはありません）。

この情報は css-floating tag wiki にあり、他の floatingコンテナと親コンテナの詳細情報 も投稿しました。

9
animuson

overflowを.main_navに置く

.header_wrapper .main_nav div{
    float:left;
    overflow: hidden;
}

クリアdivを実行すると、親が拡張されます。兄弟の背景には影響しません。

3
Sparky

float DIV'である.main_navsの親にclearする必要があります。このように書きます：

.header_wrapper .main_nav{
  overflow:hidden;
}
2
sandeep