Position relative, float prend div de la circulation normale

Comment puis-je éviter en prenant div hors de la normale, mais encore à l'aide du flotteur, comme ceci:

<div id="one">
    <div id="two"></div>
</div>

CSS:

#one {
    width: 100%;
    height: auto;
}

#two {
    width: 100px;
    height: 100px;
    position: relative;
    float: left;
}

Maintenant div "on" n'a pas de hauteur et div "les deux" il suffit de regarde comme il n'est pas dans la première div.

OriginalL'auteur Emir Dupovac | 2013-09-20

21

Ahh, l'effondrement problème. Il y a un excellent article sur les flotteurs ici http://css-tricks.com/all-about-floats/
Dans votre cas, j'aimerais ajouter
```
overflow: auto
```
à #one

La relative info est cité ci-dessous:
Techniques pour la Compensation des Flotteurs

Si vous êtes dans une situation où vous savez toujours ce que l'réussir
élément va être, vous pouvez appliquer le clear: both; la valeur
élément et aller sur votre entreprise. C'est l'idéal, car il ne nécessite pas de
fantaisie hacks et pas d'éléments supplémentaires qui le rend parfaitement sémantique.
Bien sûr, les choses n'ont généralement pas de cette façon et nous avons besoin de nous
plus de flotteurs de compensation des outils dans notre boîte à outils.

Le Vide Div Méthode est, littéralement, un div vide. <div style="clear: both;"></div>. Parfois, vous verrez un <br /> élément
ou quelque autre élément aléatoire utilisé, mais la div est la plus courante car
il n'a pas de navigateur par défaut de style, n'ont pas de fonction spéciale,
et il est peu probable d'être générique en forme avec CSS. Cette méthode est
méprisé par les sémantiques des puristes puisque sa présence n'a pas de contexual
de sens du tout à la page et il est là uniquement pour la présentation. De
bien sûr, dans le sens strict du terme, ils sont de droite, mais il fait le travail
droit et n'a pas fait de mal à personne.

Le Débordement de la Méthode s'appuie sur la définition de la propriété CSS overflow sur un élément parent. Si cette propriété est définie sur auto ou caché dans l'
élément parent, le parent sera élargi pour contenir la flotte,
effectivement compensation pour réussir éléments. Cette méthode peut être
magnifiquement sémantique comme il ne peut pas exiger d'un des éléments supplémentaires.
Cependant, si vous vous trouvez l'ajout d'un nouveau div juste d'appliquer ce, il
est tout aussi unsemantic comme le vide div méthode et moins adaptables.
Aussi garder à l'esprit que la propriété overflow n'est pas spécifiquement pour
la compensation des flotteurs. Veillez à ne pas masquer le contenu ou indésirable
les barres de défilement.

La Simple Méthode de Compensation utilise un habile CSS pseudo-sélecteur de (:after) pour effacer les flotteurs. Plutôt que de fixer le débordement sur l'
parent, vous appliquez une classe supplémentaire comme "clearfix". Alors
appliquer ce CSS:
```
.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}
```
Cela permettra d'appliquer un petit peu de contenu, caché de la vue, après l'
élément parent qui efface le flotteur. Ce n'est pas tout à fait l'ensemble de la
histoire, comme code supplémentaire doit être utilisé pour accueillir pour les plus âgés
les navigateurs.
OriginalL'auteur Barbara Laird
0

Vous voyez votre plongée #un effondrement. L'ajout d'un dépassement de la valeur à la CSS de l'élément devrait corriger ce problème.

OriginalL'auteur Meximize
0

Cela devrait résoudre votre problème. Essayez d'ajouter ce pour les deux DIVs:

**Pour des raisons de test, vous pouvez ajouter un peu de fond de couleur.

jsFiddle exemple ici!
```
position: relative;
float: left;
clear: none;
display: block;
```
OriginalL'auteur Borsn

Vous devez vous connecter pour publier un commentaire.