div nicht schwimmenden entlang der vorangehenden div mit float-Eigenschaft "Links" eingestellt

Welche CSS-Regeln erklären die folgenden sceanrio:

Angenommen ich habe Folgendes HTML-CSS-snippets

HTML:

<div id="main">
   <div id="first">
       first div float left
   </div>
   <div id="second">
       second div does not have a float property set 
       and appears in a new line instead of next to 
       the first div
   </div>
</div>

CSS:

#first
  float: left

Was ich bin gefragt wird, warum der zweite div schwebt neben dem ersten div, nur dann, wenn seine Breite festgelegt ist. Wenn ich die Stelle des zweiten div mit einem Absatz, ist es auch schwimmt neben dem ersten div. Also warum die zweite div-einzige position neben dem ersten, wenn seine Breite festgelegt ist oder seine eigene float-Eigenschaft float left?

Durch die Art und Weise. Ich bin nicht versucht, Sie zu erreichen, jede Art von layout hier. Ich versuche nur zu verstehen, dass diese bestimmten Verhaltensweisen des div-Elements und anderen block-Elementen.

EDIT:

OK. Erstmal danke für die Antworten. Das problem hatte ich war aufgrund der Tatsache, dass ich Tat, setzen Sie die Breite der ersten und der zweiten div den gleichen Wert, so dass der Inhalt der zweiten konnte nicht schwimmen um die erste. Um es zusammenzufassen, ich denke, es ist wichtig zu wissen, dass Elemente mit der Eigenschaft float gesetzt sind genommen von die Seite fließen und nehmen Sie nicht alle Platz. Zweitens sollte man sich daran erinnern, nur der Inhalt kann die Strömung um, nicht die tatsächliche div.

InformationsquelleAutor jagse | 2011-10-30

3

Einen <div> ist ein block-level-element, die 100% breit und hat einen Zeilenumbruch vor & nach, wenn es innerhalb der normalen Inhalte fließen.

Technisch, wenn Sie schwimmen <div>, nimmst du das element aus dem normalen Fluss, so dass es nicht mehr einen line-break vor & nach und auch die andere Seite der Inhalt umfließt es.

Also warum die zweite div-einzige position neben dem ersten, wenn
seine Breite festgelegt ist oder seine eigene float-Eigenschaft float left?

Schwebte <div>'s werden immer angezeigt, side-by-side nur, wenn es genügend Raum, um die Sie enthalten, side-by-side. Ansonsten, die nächsten schwebte <div> Zeilenumbruch in eine neue Zeile. Dies ist, da schwebte <div>'s sind außerhalb der content-flow und definiert auf diese Weise zu Verhalten, die in der spec.

Aber Sie haben einige falsche Annahmen in Ihrer Frage, was passiert, wenn Sie die Breite der zweiten (nicht-schwebenden) <div>.

Zweiten <div> selbst ist immer unter (Bedeutung hinter) die schwebte <div>. In der Erwägung, dass der "Inhalt" der zweite <div> immer fließt rund um das schwebte <div>. (siehe drei Beispiele unten).

Also, ob oder nicht Sie legen Sie die Breite der zweiten div ist, wird der Inhalt immer noch fließen um Links gefloateten div wie Sie sehen können-hier dargestellt in drei Beispiele. (Zur Veranschaulichung die ersten <div> ist rot mit 50% Deckkraft und die zweite ist blau mit einer dicken grünen Rand.)
Wie Sie sehen können aus allen drei Beispielen oben, trotz der Existenz der Schwamm zuerst <div>...
- zweiten <div> beginnt immer am linken Rand des Bildschirms, trotz der Breite des zweiten <div>.
- zweiten <div> beginnt immer am oberen Rand des Bildschirms, weil es keine andere Seite fließen Inhalte über das zweite <div>.
- den eigentlichen Inhalt des zweiten <div> fließt rund um (rechts) die schwebte zunächst <div> nur, wo es genug Raum in Ihrem container erlauben es, die Strömung um das schwebte <div>. Ansonsten es wird, als ob es eine neue Linie, wo wirklich nur Ihr Inhalt ist weiterhin zu fließen, um den Boden der Schwamm <div>.
W3C-Spec: 9 Visuelle Formatierung Modell, 9.5 Floats

Ein float ist eine box, die verschoben, Links oder rechts auf der aktuellen
Linie. Das interessanteste Merkmal einer float - (oder "schwebte" oder
"floating" - box) ist, dass der Inhalt fließen kann entlang seiner Seite (oder werden
verboten, dies zu tun, indem Sie die 'clear' - Eigenschaft). Inhalt nach unten fließt
die Rechte Seite des Links-gefloateten box, und auf der linken Seite ein
rechts-Schwamm-box. Das folgende ist eine Einführung zu schweben
Positionierung und content-flow; die genauen Regeln für float-Verhalten
sind in der Beschreibung der 'float' - Eigenschaft.

Einem Schwamm-box wird nach Links oder rechts, bis die äußere Kante
berührt der mit block Rand oder der äußeren Kante eines anderen Schwimmers.
Wenn es eine line-box, die äußere Spitze des Schwamm-box ausgerichtet wird
mit den Anfang der aktuellen Zeile im Feld.

Wenn es nicht genügend horizontaler Platz für die Schwimmer, ist es verschoben
nach unten, bis Sie entweder es passt oder es nicht mehr schwimmt vorhanden.

Da ein Schwimmer ist nicht im Fluss, nicht-positionierte block-Boxen erzeugt
vor und nach der float-box flow vertikal, als ob der Schwimmer nicht
vorhanden. Jedoch, die aktuelle und die nachfolgende Zeile ein Kästchen erstellt, neben
die Schwimmer sind gekürzt wie nötig, um Platz zu machen für die margin-box
der float.

Und hier sind eine ganze Reihe von Beispielen...

W3C-Spec: 9 Visuelle Formatierung Modell, 9.8 Vergleich von normalem Fluss, floats und absolute Positionierung

InformationsquelleAutor Sparky
2

Was macht Sie glauben, dass die div ' s sind schwebte neben einander? In Wirklichkeit sind Sie nicht. Es ist nur, dass Ihr Inhalt zeigt sich neben jedem anderen aber nicht, weil DIV #zweite ist Links neben dem gefloateten DIV. Es spielt keine Rolle, wenn Sie die width-oder nicht.

Was in der Tat geschieht, ist, dass die gefloateten DIV #erste-geschwommen auf der linken Seite. Weil es schwebte, es ist aus dem normalen Fluss. Dies bedeutet, dass das DIV #zweite ist tatsächlich auf der gleichen Stelle, wo DIV #erste erscheint. Der Inhalt von DIV #zweites aber ist die inline-Inhalte und inline-Inhalt fließt immer herum schwebte Elemente. Auch schwebte Elemente, die sich außerhalb des Containers. Also DIV #zweite ist unter DIV #erste-aber der Inhalt von DIV #zweite ist im Umlauf DIV #erste -.

Um das zu zeigen, habe ich das erstellen dieser CSS:
```
#first { float: left; background-color: rgba(255,0,0,0.3); }
#second { background-color: rgba(0,255,0,1); }
```
Spielen mit der alpha-Wert der RGBA () - Wert (d.h. der Letzte parameter, es kann im Bereich von 0 bis 1) der hintergrund-Farbe des DIV #erste-und Sie werden sehen, dass DIV #zweite ist in der Tat unter dem DIV #erste-die ganze Zeit

InformationsquelleAutor Marco Miltenburg
1

Es sei denn, Sie deaktivieren Ihr schwebt, der neben block-level-element wird die Kerze neben dem letzten float standardmäßig.

Ich bin mir nicht sicher, was Sie versuchen, hier zu erreichen, aber wenn Sie wollen #first zu schweben, und #second zu Schwimmer NICHT, die Regel, die Sie möchten hinzufügen, um #first ist : clear:both

Aber, das ist ziemlich blöd, könnte man genauso gut einfach entfernen Sie die float-Eigenschaften vollständig, wenn Sie wollen stapeln.

InformationsquelleAutor AlienWebguy
1

Block-Elemente mit bis zu 100% von der Breite Ihres übergeordneten Elements, so dass, auch wenn Ihre ersten div geschwommen, der zweite div wird die Breite seiner Eltern, so fallen die auf einer zweiten Linie. Dies ist, warum, wenn Sie geben Sie eine kleinere Breite, es steht neben dem ersten gefloateten div.

Der Grund, warum es funktioniert auch, wenn Sie schweben die beiden divs ist, dass Schwebekörper Verhalten sich ein bisschen mehr wie inline-block-Elemente, wich heißt, Sie nehmen nur den Platz für die Inhalte in Ihnen.

Quintessenz ist, wenn Sie wollen, dass diese zwei divs stehen nebeneinander, Sie sollten wahrscheinlich nur schweben die zwei von Ihnen.
- Ich weiß um die Tatsache, dass bock-Elemente in der Regel bis 100% der Breite. Aber wie gesagt, wenn ich ersetzt das div mit einem Absatz die Absatz-Positionen rechts neben der #ersten div. Und ein p-tag ist auch ein Beispiel für ein block-element. Was auch mich verwirrt, ist die Tatsache, dass der p-tag-Positionen in die nächste Zeile, wenn ich die Breite.
InformationsquelleAutor Leo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.