Pourquoi l'élément flottant chevauche-t-il l'élément ci-dessous et non l'inverse?

Question

div { 
 
    background-color: #00FFFF; 
 

 
} 
 
p { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
    margin: 0px; 
 

 
} 
 

 
#p1 { 
 
    background-color: red; 
 
float: left; 
 

 

 
} 
 
#p2 { 
 
    background-color: green; 
 
} 
 
#p3 { 
 
    background-color: orange; 
 
} 
 
#p4 { 
 
    background-color: yellow; 
 
} 
 

 
span { 
 
    position: relative; 
 
} 
 

 
#s1 { 
 
top: 1px; 
 
left: 1px; 
 
} 
 

 
#s2 { 
 
    top: 2px; 
 
left: 2px; 
 

 
} 
 
#s3 { 
 
    top: 3px; 
 
left: 3px; 
 

 
} 
 
#s4 { 
 
    top: 4px; 
 
left: 4px; 
 

 
}

<h1>Floating Elements</h1> 
 

 
<div> 
 
    <p id="p1"><span id="s1">A</span></p> 
 
    <p id="p2"><span id="s2">B</span></p> 
 
    <p id="p3"><span id="s3">C</span></p> 
 
    <p id="p4"><span id="s4">D</span></p> 
 
    <section>This is regular content continuing after the the paragraph boxes.</section> 
 
</div>

Answer 1

Pourquoi cela?

Parce que c'est ainsi que fonctionne le flotteur. Lorsque vous placez float sur un élément, vous ne dites pas grand-chose de la façon dont cet élément devrait s'afficher, mais plutôt comment/que le contenu suivant devrait circuler autour de lui.

Pour être plus précis, le contenu suivant en ligne.

Étant donné que vos paragraphes sont des éléments de bloc, et vous avez également fixé leur largeur et la hauteur de 50px, c'est le résultat que vous obtenez - le contenu en ligne du paragraphe #p2ne écoulement autour du paragraphe #p1; mais les restrictions de largeur et de hauteur du paragraphe parent ne permettent pas à ce parent de se développer en conséquence.

---

Edit:
Si vous éprouvez des difficultés à comprendre ce que je suis en train de dire, considérons l'exemple suivant plus simple:

#floated { 
 
    float:left; 
 
    width: 50px; 
 
    height: 50px; 
 
    border:1px solid red; 
 
} 
 

 
#unfloated { 
 
    border:1px solid blue; 
 
    background: green; 
 
}

<div id="floated"></div> 
 

 
<div id="unfloated">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>

Comme vous pouvez le voir facilement, sans un arrière-plan pour l'élément flottant, le deuxième élément div non flottant s'étend sur toute la largeur, "sous" l'élément flottant, et seulement son contenu en ligne, le texte Lorem Ipsum, flotte autour de l'élément flottant.

Que est comment le flotteur fonctionne. Dans votre exemple, vous voyez le "B" apparaître dans le deuxième carré - car l'élément de bloc parent de ce B est limité à 50px de largeur et de hauteur, donc il ne peut pas croître pour englober le "B ", le texte" B "sort simplement des dimensions de l'élément parent, comme c'est le cas avec la valeur par défaut overflow:visible.

Answer 2

De Stacking and float de MDN

Pour les blocs flottants l'ordre d'empilement est un peu différent. blocs flottants sont placés entre les blocs non positionnés et des blocs positionnés

Et il va plus loin pour dire

Si l'opacité du bloc non positionné (#p2 dans votre exemple) est réduite, puis quelque chose d'étrange se produit: l'arrière-plan et la bordure de ce bloc apparaissent au-dessus des blocs flottants, mais toujours sous les blocs positionnés.

Answer 3

Vous devez utiliser le clear-fix après les éléments flottants, quelque chose comme:

éléments après un élément flottant couleront autour. Pour éviter cela, utilise la propriété clear.

CSS Layout - float and clear

div { 
 
    background-color: #00FFFF; 
 

 
} 
 
p { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
    margin: 0px; 
 

 
} 
 

 
#p1 { 
 
    background-color: red; 
 
float: left; 
 

 

 
} 
 
#p2 { 
 
    background-color: green; 
 
} 
 
#p3 { 
 
    background-color: orange; 
 
} 
 
#p4 { 
 
    background-color: yellow; 
 
} 
 

 
span { 
 
    position: relative; 
 
} 
 

 
#s1 { 
 
top: 1px; 
 
left: 1px; 
 
} 
 

 
#s2 { 
 
    top: 2px; 
 
left: 2px; 
 

 
} 
 
#s3 { 
 
    top: 3px; 
 
left: 3px; 
 

 
} 
 
#s4 { 
 
    top: 4px; 
 
left: 4px; 
 

 
} 
 

 
.clear { clear:both; }

<h1>Floating Elements</h1> 
 

 
<div> 
 
    <p id="p1"><span id="s1">A</span></p> 
 
    <div class="clear"></div> 
 
    <p id="p2"><span id="s2">B</span></p> 
 
    <p id="p3"><span id="s3">C</span></p> 
 
    <p id="p4"><span id="s4">D</span></p> 
 
    <section>This is regular content continuing after the the paragraph boxes.</section> 
 
</div>

Answer 4

perdre du float: left; sur # p1 {}, ajoutez une position: relative; à votre div {} et position: absolute; en haut: 0; gauche: 0; à votre # p2 {}. Vous n'êtes pas sûr de ce que vous essayez d'atteindre mais si vous préférez garder le flotteur: à gauche; sur # p1 {} que vous devez effacer: les deux; dans{}.