Warum müssen Elemente im selben Container mit einem zentrierten Element unmittelbar vor dem Leeren floaten?

Question

Ich hatte ein Problem mit einem rechts schwebenden Element, das nicht in der gleichen horizontalen Ausrichtung blieb wie ein linkes schwebendes Element und ein zentriertes Element. Das rechte schwebende Element schwebte richtig, aber die anderen waren unterhalb der horizontalen Linie.

Wenn Elemente im selben div schweben (zum Beispiel eines links, eines zentriert und eines rechts), muss das rechte Element vor dem linken Element gestapelt werden.

Beispiel:

<div id=container> 
    <div id="float-right"></div> 
    <div id="margin-auto"></div> 
    <div id="float-left"></div> 
</div> 

Wenn ich nur zwei Elemente, ein linkes und ein rechtes sie wie unten horizontal sitzen.

Siehe Beispiel: jsfiddle

Wenn ich ein zentrales Element das richtige Element hinzufügen bewegt sich nach unten.

Siehe Beispiel: jsfiddle

Was hier geschieht?

Answer 1

Ich werde Sie mit einem einfachen Beispiel bieten hier, nehmen wir an, dass Sie nicht in der Mitte div sehen jede width so was zuweisen wird es werden tatsächlich tun

Demo

<div style="width:100%"> 
    <div style="width:20px;height:20px;background-color:red;float:left;border: 3px solid #000;"></div> 
    <div style="height:20px;background-color:red;margin:0 auto auto;border: 3px solid #000;"></div> 
    <div style="width:20px;height:20px;background-color:red;float:right;border: 3px solid #000;"></div> 
</div> 

Warum das passiert?

div ist ein block-level Element, es den gesamten horizontalen Raum auf der Seite einnimmt, wenn Sie wissen, wenn Sie float jedes Element entweder left oder right es 100% nicht mehr nehmen, und es wird nur der Raum zugewiesen nehmen von mit der Breite oder dem Inhalt, den es enthält, so wird in diesem Fall left floateddiv20px Breite nehmen, die anderen Raum ungenutzt lässt. Jetzt haben Sie eine weitere div, die nicht FLOATED ist, aber es wird den Rest des verfügbaren horizontalen Speicherplatzes nehmen, so dass Ihr right floateddiv Element nach unten drücken.

Was also zu tun, um dies zu lösen?

Sie müssen float alle div nach links, oder es kann ausreichen, wenn Sie die divfloat nach links oder nach rechts middle machen. Jetzt bin ich mir bewusst, dass Sie 2 div, 1 nach links und andere nach rechts schweben möchten, aber dies ist nicht der richtige Weg, um das zu tun, wenn Sie möchten, können Sie die Elemente in einem Container div, oder was Sie können Verwenden Sie position: absolute;, um die Elemente richtig einzustellen.

---

Um Ihnen zu zeigen, wie Block-Level-Elemente arbeiten, werde ich Ihnen ein anderes Beispiel hier teilen ..

Angenommen, Sie ein div in einem p Tag verschachtelt haben (Dies ist ungültig so nie bitte Verwenden Sie dies in der realen Welt, dies ist nur zu Demonstrationszwecken), und geben Sie dem Element div etwas Breite und sehen Sie, wie es Ihren Text rendert.

<p>Hello World, I don't want the <div>text to</div> break</p> 

div { 
    width: 40px; 
    background: #f00; 
} 

Demo 2

Obwohl Sie die width bieten Level-Element zu blockieren, wird es noch den Absatz brechen.

---

Von w3c

standardmäßig Elemente auf Blockebene werden anders als Inline- Elemente formatiert. Im Allgemeinen beginnen Elemente auf Blockebene mit neuen Zeilen, inline Elemente nicht.

Answer 2

Wenn Sie beide Floats über das nicht flotierte Div setzen, erhalten Sie, was Sie wollen.

Answer 3

div ist ein Block-Level-Element, es macht der rechten Seite nach unten drücken div, da es nicht schwimmt, entweder auf der linken oder auf der rechten Seite, und daher drückt es Ihren anderen div unten.

Falls Sie Fragen zu schweben, wird es den Rest des Raumes auf der anderen Seite leer machen, so wird es die richtige div schwebte erlauben neben der Mitte div

http://jsfiddle.net/mSXX6/2/

Answer 4

Dies geschieht, sitzen wegen die Art, wie Elemente gemäß der HTML-Spezifikation verschoben werden. Elemente werden horizontal von links nach rechts verschoben. Jedes schwebende Element wird so weit links wie möglich angezeigt.

Da div ein Element auf Blockebene ist, wird es alles auf der rechten Seite nach unten schieben, aber gegen etwas auf der linken Seite stapeln.

In Ihrem Beispiel können Sie es nicht sehen, aber das floated oder center div erstreckt sich bis zum Rand der Seite, wie von @Mr demonstriert. Aliens Geige.

Sie können in der Spezifikation mehr darüber lesen:

http://www.w3.org/wiki/Floats_and_clearing