Principes de base des éléments flottants dans CSS

Question

Je comprends que float prend un élément aussi gauche ou aussi droite que possible du flux actuel. Je comprends que l'élément suivant l'élément flotté l'enveloppe comme un p après img. premier-faire tous les éléments suivants envelopper le flotteur jusqu'à ce qu'il n'y ait plus de place? (donc si j'ai p qui ne prend que la moitié de l'image flottante, est-ce que l'a et h3 et puis un autre p continueront à rouler jusqu'à ce qu'il n'y ait plus d'espace ou juste le premier élément?) l'enroulement de l'élément transparent et des éléments suivants, n'est-ce pas? Est-ce qu'un élément en ligne ou en bloc va envelopper le flotteur? alors pourquoi un autre div ne le fera pas?

Je ne comprends pas pourquoi lorsque vous flottez un div/img le p après il va l'emballer encore si vous avez 2 divs, quand le premier est flottant disons à gauche, le div après sera sur une nouvelle ligne. si je le fais flotter pour la gauche aussi je comprends qu'il sera empilé à côté de l'ancien flotteur, mais pourquoi sera-t-il sur la même ligne que le premier si je le fais flotter vers la droite? Je pensais que le flotteur utilise le flux normal, et dans le flux normal, un div après le premier flotteur sera en dessous. alors pourquoi 1 flotteur gauche div et un autre flotteur après ressemblera que:

------ 
------

encore si flottant mal la deuxième à droite, il sera que:

------      ----------

et non que:

------- 
                  -------------

Le flotteur fait-il quelque chose au flux?

---

les gars je suis désolé, je n'ai pas été clair. je n'essaie pas de faire quoi que ce soit, il suffit de comprendre le comportement des flotteurs en général.

permet de dire que j'ai:

<div style="float:left"></div> 
<div></div> 

alors la première flottera pour la gauche, mais pour une raison quelconque la deuxième div (permet de dire que j'ai donné la première d'une largeur inférieure à 100%) sera sur une nouvelle ligne. pourquoi une nouvelle ligne et pas comme p-wrap autour et à côté de la première? nous ne donnons p un flotteur mais il enveloppe l'élément floate3d.

seconde:

<div style="float:left"></div> 
<div style="float:right"></div> 

deux divs (de largeur appropriée à nouveau donnée) sera sur la même ligne. Je veux savoir pourquoi le premier code les fera apparaître sur des lignes différentes et la seconde sur la même ligne. ne devrait pas flotter déplacer la boîte autant sur le côté de son flux de courant? isnt le flux actuel de la deuxième div (deuxième code) sera où il est sur le premier code (une ligne ci-dessous) alors pourquoi utiliser 2 flotteurs opposés fera afficher les div sur la même ligne: ------ ------ ----------------- au lieu de l'un flottant juste être là où il est maintenant, juste une ligne en dessous de la première div?

Answer 1

On dirait que vous avez besoin de commander vos balises HTML à l'ordre des flotteurs.

Les flotteurs droits devraient être prioritaires.

Answer 2

Je l'ai lu 3 fois et abandonnèrent ...

Essayez-vous de flotter un élément à gauche et un autre droit?

simplement leur donner une largeur:

<div style="float: left; width: 400px;">1</div> 
<div style="float: right; width: 400px;">2</div> 

P.S. Une image vaut mille mots ..

[modifier] si vous le voulez dans un conteneur:

<div id="container" style="position: absolute; width: 800px; margin: 0 auto; overflow: hidden;"> 
    <div style="float: left; width: 400px;">1</div> 
    <div style="float: right; width: 400px;">2</div> 
</div> 

Answer 3

On dirait que votre élément parent à vos éléments flottants ne sont pas fixés à une largeur de 100%. Assurez-vous que vous utilisez la position: relative et définissez vos largeurs correctement.

Veuillez également indiquer votre code. Il est très difficile de déchiffrer votre texte.

Answer 4

<div style="float: left;">first line</div> 
<div style="float: right;">second line</div>