Grundlagen der schwebenden Elemente in CSS

Question

Ich verstehe, dass float ein Element wie links oder wie rechts aus dem Stromfluss nimmt. ich verstehe, dass das Element folgt dem floated Element ist es wie ein p nach img wraping. zuerst alle folgenden Elemente wickeln den Schwimmer, bis kein Platz mehr ist? (also, wenn ich p habe, die nur die Hälfte der schwebenden Bild, wird das a und h3 und dann ein anderes p wird umhüllend, bis es keinen Platz mehr gibt? oder nur das erste Element?) Ich verstehe auch, dass eine klare stoppt die Wrapping des klaren Elements und der folgenden Elemente, oder? wird irgendein Element inline oder Block den Float umwickeln? dann warum nicht ein anderes Div wird?

ich verstehe nicht warum, wenn ein div/img das p nach es wird wickeln es noch, wenn Sie 2 divs haben, wenn das erste floated ist sagen wir nach links, das div nach wird in einer neuen Zeile sein. Wenn ich es für die Linke schwebe, verstehe ich auch, dass es neben dem ehemaligen Float stapeln wird, aber warum wird es auf der gleichen Linie sein wie die erste, wenn ich es nach rechts schweben lasse? Ich dachte, Float verwendet den normalen Fluss, und im normalen Fluss wird ein div nach dem ersten Schwimmer darunter sein. also warum 1 Schwimmer links div und andere Schwimmer nach so aussehen:

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

noch, wenn sich negative Schwimmer die zweite nach rechts, dass sein:

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

und nicht, dass:

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

ist der Float etwas zum Fluss?

---

Jungs im sorry, ich habe mich nicht klar gemacht. Ich versuche nichts zu tun, nur das Verhalten von Floats im Allgemeinen zu verstehen.

können sagen, ich habe:

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

dann die erste für das linke schweben, doch aus irgendeinem Grund die zweite div (können sagen, dass ich die erste Breite von weniger als 100% geben tat) wird auf eine neue Zeile. Warum eine neue Zeile und nicht wie p-wrap um und neben dem ersten? wir geben nicht einen Schwimmer, aber es wickelt floate3d Element.

Sekunden:

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

beide divs (wieder gegeben richtige Breite) auf der gleichen Linie sein wird. Ich möchte wissen, warum der erste Code sie auf verschiedenen Linien noch die zweite auf der gleichen Linie zeigen wird. sollte nicht float die Box so viel von ihrem aktuellen Fluss zur Seite bewegen? Ist der aktuelle Fluss des zweiten Div (zweiter Code) nicht dort, wo es auf dem ersten Code ist (eine Zeile darunter) Warum also die Verwendung von 2 entgegengesetzten Floats die divs auf der gleichen Zeile zeigen: ------ ------ ----------------- statt der einen schwebenden rechts sein, wo es jetzt ist, nur eine Linie unter dem ersten div?

Answer 1

Klingt wie Sie müssen Ihre HTML-Tags in der Reihenfolge der Schwimmer zu bestellen.

Rechte Schwimmer sollten zuerst kommen.

Answer 2

ich gelesen, dass 3-mal und gab ...

Sind Sie versuchen, ein Element zu schweben nach links und wieder rechts?

einfach geben ihnen eine Breite:

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

P. S. Ein Bild sagt mehr als tausend Worte ..

[Bearbeiten], wenn Sie es in einem Container wollen:

<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

wie Ihr übergeordnetes Element Sieht Ihre Schwimmelemente ist nicht auf 100% Breite eingestellt. Stellen Sie sicher, dass Sie position: relativ verwenden und die Breite richtig einstellen.

Auch, bitte zeigen Sie Ihren Code. Es ist sehr schwer, deinen Text zu entziffern.

Answer 4

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