web-dev-qa-db-fra.com

L'arrière-plan CSS disparaît lors de l'utilisation de float: left

Voici mon html:

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

Comme vous pouvez le voir, je veux construire un menu avec des divs flottants. Ce faisant, l'arrière-plan de main_nav disparaît.

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

J'ai essayé d'utiliser clair: les deux, mais l'arrière-plan est toujours disparu. Des idées pourquoi?

htmlcsscss-float
21
Upvote

Ajouter overflow:auto; à main_nav ramène l'arrière-plan.

63
j08691

En effet, le contenu flottant ne prend pas de place . Votre parent main_div la division prend essentiellement une hauteur de 0 car elle n'a pas d'autre contenu, qui "cache" l'arrière-plan (il n'y a pas de hauteur à afficher derrière).

Ces informations sont disponibles dans le wiki de balises flottantes css et j'ai également publié d'autres informations plus détaillées sur les conteneurs flottants et parents .

9
animuson

Mettez overflow sur .main_nav

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

Votre effacement div force son parent à se développer, il n'a aucun effet sur l'arrière-plan de son frère.

3
Sparky

Vous devez clear à votre float DIV's parent qui est .main_nav. Écrivez comme ceci:

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