Zeilenbox - Float

[napporize]

Hallo zusammen,

ich lese gerade den Artikel "Floattheorie". Darin wird einmal geschrieben: "Wenn sich ein Float innerhalb einer Zeilenbox befindet, wird die Oberkante des Floats auf eine Höhe mit der Oberkante der Zeilenbox gesetzt."

Ist es denn möglich, dass ein Float auch ausserhalb einer Zeilenbox sein kann? Ich mein irgendwo fängt der Float ja an - und dass kann doch nur innerhalb einer Zeilenbox sein..

 

[neuroleptika]

Ich weiß nicht was du meinst.
Aber durch float wird eine Zeilenbox (inline-Box?) zur Blockbox.

 

[prm]

Ich verstehe die Frage auch nicht so ganz.
Es ist aber möglich, ein gefloatetes Element durch margin-Angaben oder absolute/relative Positionierung von seinem "Normalstandort" aus zu "verschieben".

 

[napporize]

Ich hab mich falsch ausgedrückt...
Also ein Float, ist ja nichts anderes wie eine Blockbox(Blockelement). Wird er eingefügt, ist er ausserhalb des normalen Zeilenfluss?
Zeilenboxen bestehen aus Inline-Elementen. Also enthalten keine Blockboxen(Blockelemente)? Daher irretiert mich der Satz:
"Wenn sich ein Float innerhalb einer Zeilenbox befindet"..
Ist damit gemeint: Das sein Float der z.b links ausgerichtet ist und rechts von text umflossen wird, sich an der Oberkante der ersten Zeilenbox rechts von ihm ausrichtet??
Ich hoffe es wird ungefähr verstanden was ich meine... Danke für weitere Antworten

 

[neuroleptika]

Ich glaube ich habe die Frage noch immer nicht verstanden.

Die nachfolgenden inline-Inhalte weichen dem Float aus.
Auf die darüberliegenden hat der Float keine Auswirkung:

<p>
<span>Lorem ipsum vim ei nonumy option maiorum,
et duo <b>electram</b> constituto adipiscing.</span>
</p>

p {
width: 20em;
}

span {
background-color: gray;
line-height: 3;
}

  b {
float: left;
width: 5em;
padding: 1em;
background-color: darkred;
}

 

[napporize]

Vorab: Danke für deine Mühe
Genau so in etwa habe ich das gemeint. Die inlineelemente(welche sich in Zeilenboxen befinden) weichem dem Float aus. Ein Float kann nicht in einer Zeilenbox stehen... Hier nochmal der Satz der Floattheorie...
"Wenn sich ein Float innerhalb einer Zeilenbox befindet, wird die Oberkante des Floats auf eine Höhe mit der Oberkante der Zeilenbox gesetzt.
Vielleicht könntest du mir auch mal deine Interpretation dieses Satzen geben bzw deines Veständnisses davon :razz:

 

[neuroleptika]

Darum geht es: Float: Die Theorie

Ich kann den Satz nicht mit dem darunterstehenden Beispiel in Verbindung bringen:

<div style="float:left; width:40%;"><p>Floatender Text</p></div>
<p>Absatz ausserhalb des Floats.</p>

Die inline-Inhalte der unteren Blockbox weichen dem Float aus.
Das Element selber <p> nicht.
Aber das hat der Autor wohl nicht gemeint.

 

[prm]

Ich versuche mal meine Interpretation, zu folgenden Sätzen (im Zusammenhang), Quelle: Andreas Kalt:

Floats sind aus dem Fluss der HTML-Elemente herausgenommen. Aber im Gegensatz zu absolut positionierten Elementen, werden Floats direkt nach dem letzten vorausgehenden Block-Element angeordnet (genau wie nicht gefloatete Block-Elemente). Wenn sich ein Float innerhalb einer Zeilenbox befindet, wird die Oberkante des Floats auf eine Höhe mit der Oberkante der Zeilenbox gesetzt.

Die rote und blaue Aussage widersprechen sich m.E. nicht, sondern bedeuten das gleiche. Da es nur Block- und Inline-Elemente gibt, kann sich somit ein Float auch nur innerhalb dieser beiden Elemente befinden.

Rot (Variante 1):
Float befindet sich unter einem Blockelement >>> Die gefloatete Box wird unterhalb des vorangegangenen Blockelements angeordnet.
Beispiel:

<div style="background: red;"> Text im div-Blockelement</div>
<div style="float:left; background: yellow;">Text in der gefloateten Box, der ein Blockelement voran geht</div>

Blau (Variante 2):
Befindet sich der float innerhalb eines Inlineelements, dann wird seine Oberkante auf die Höhe seiner eigenen Zeile gesetzt. Diese wiederum befindet sich ebenfalls unterhalb der vorangehenden Zeilen, siehe Codebeispiel von neuroleptika.

Die Frage, ob sich ein Float auch außerhalb einer Zeilenbox (Inlineelement) liegen kann, stellt sich m.E. nicht.
Er kann nämlich (nur) sowohl innerhalb eines Inlineelements als auch innerhalb eines Blockelements vorkommen.

 

[napporize]

Könntest du mir bitte noch einen Beispiel posten, mit einem Float innerhalb eines Inlineelements?

 

[prm]

z.B. so:

<p style="background: red;">
normaler Text vor dem float.....<span style="float: left; background: yellow;">Text innerhalb des gefloateten Inlineelements "span"</span> normaler Text nach dem float, der hier oberhalb des gefloateten dargestellt wird.
</p>

 

[napporize]

Ich muss nochmal etwas ergänzen .
Ich denke, dass sich der Autor bezüglich des besprochenen Satzes geirrt hat.
jedes Element das gefloatet wird, wird zu einem Block-element und ein Block-element ist in keiner Zeilenbox enthalten, sondern enthält Zeilenboxen.
Ich denke der Autor hat das gemeint: Cascading Style Sheets - Google Bücher.
Würde mich freuen wenn ihr euch den Link anschaut(seit direkt bei dem kleinen entsprechenden Text) und mir eure Meinung sagt.