diff options
Diffstat (limited to 'files/de/web/css/float')
| -rw-r--r-- | files/de/web/css/float/index.html | 218 |
1 files changed, 173 insertions, 45 deletions
diff --git a/files/de/web/css/float/index.html b/files/de/web/css/float/index.html index 2711d0d936..460f1e6fec 100644 --- a/files/de/web/css/float/index.html +++ b/files/de/web/css/float/index.html @@ -3,65 +3,200 @@ title: float slug: Web/CSS/float tags: - CSS - - CSS Referenz + - CSS Eigenschaft + - CSS Positionierung + - Referenz + - 'recipe:css-property' translation_of: Web/CSS/float --- -<p>{{ CSSRef() }}</p> +<div>{{CSSRef}}</div> -<h2 id="Übersicht">Übersicht</h2> +<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <code>float</code> platziert ein Element auf der linken oder rechten Seite seines Containers, so dass Text- und Inline-Elemente um das Element herum angeordnet werden können. Das Element wird aus dem normalen Fluss der Seite entfernt, bleibt aber dennoch ein Teil des Flusses (im Gegensatz zur absoluten Positionierung).</p> -<p>Die <code>float</code> Eigenschaft bestimmt, ob ein Element aus dem normalen Fluss herausgelöst werden soll und nachfolgende Inhalte auf der linken oder rechten Seite des gefloateten Elements platziert werden sollen.</p> +<p>.</p> -<ul> - <li>Standardwert: <code>none</code></li> - <li>Anwendbar auf: alle Elemente</li> - <li>Vererbbar: Nein</li> - <li>Prozentwerte: Nein</li> - <li>Medium: visuell</li> - <li>berechneter Wert: wie festgelegt</li> -</ul> +<div>{{EmbedInteractiveExample("pages/css/float.html")}}</div> + +<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p> + +<p>Ein Floating-Element ist ein Element, bei dem der berechnete Wert von <code>float</code> nicht <code>none</code> ist.</p> + +<p>Da <code>float</code> die Verwendung des Blocklayouts impliziert, ändert es in einigen Fällen den berechneten Wert der {{cssxref("display")}} Werte:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifizierter Wert</th> + <th scope="col">Berechneter Wert</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>inline</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>inline-block</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>inline-table</code></td> + <td><code>table</code></td> + </tr> + <tr> + <td><code>table-row</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-row-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-column</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-column-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-cell</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-caption</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-header-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>table-footer-group</code></td> + <td><code>block</code></td> + </tr> + <tr> + <td><code>inline-flex</code></td> + <td><code>flex</code></td> + </tr> + <tr> + <td><code>inline-grid</code></td> + <td><code>grid</code></td> + </tr> + <tr> + <td><em>other</em></td> + <td><em>unchanged</em></td> + </tr> + </tbody> +</table> + +<div class="note"><strong>Hinweis: </strong>Wenn Sie diese Eigenschaft von JavaScript als Mitglied des {{domxref("HTMLElement.style")}} Objektsreferenzieren, unterstützen moderne Browser <code>float</code>, aber in älteren Browsern müssen Sie es als <code>cssFloat</code> buchstabieren, wobei Internet Explorer ab Version 8 und älter <code>styleFloat</code> verwenden. Dies war eine Ausnahme von der Regel, dass der Name des DOM-Mitglieds der in camel case (Binnenmajuskel) geschriebene Name des durch Bindestriche getrennten CSS-Namens ist (aufgrund der Tatsache, dass "float" ein reserviertes Wort in JavaScript ist, was sich in der Notwendigkeit zeigt, "class" als "className" und <label>'s "for" als "htmlFor" zu maskieren).</div> <h2 id="Syntax">Syntax</h2> -<pre class="eval">float: left | right | none | inherit +<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +float: left; +float: right; +float: none; +float: inline-start; +float: inline-end; + +/* Global values */ +float: inherit; +float: initial; +float: unset; </pre> -<h2 id="Werte">Werte</h2> +<p>The <code>float</code> property is specified as a single keyword, chosen from the list of values below.</p> + +<h3 id="Values">Values</h3> <dl> - <dt>none</dt> + <dt><code>none</code></dt> <dd>Standardwert. Das Element wird nicht umflossen.</dd> - <dt>left</dt> + <dt><code>left</code></dt> <dd>Das Element wird nach links gerückt und die Inhalte des umliegenden Elements (containing block) werden rechts vom Element angeordnet.</dd> - <dt>right</dt> + <dt><code>right</code></dt> <dd>Das Element wird nach rechts gerückt und die Inhalte des umliegenden Elements (containing block) werden links vom Element angeordnet.</dd> - <dt>inherit</dt> + <dt><code>inline-start</code></dt> + <dd>Das Element muss auf der Anfangsseite seines enthaltenden Blocks fließen. Das ist die linke Seite bei <code>ltr</code> Richtungen und die rechte Seite bei <code>rtl</code>-Richtungen.</dd> + <dt><code>inline-end</code></dt> + <dd> + <p>Das Element muss auf der Endseite seines enthaltenden Blocks fließen. Das ist die rechte Seite bei <code>ltr</code> Richtungen und die linke Seite bei <code>rtl</code>-Richtungen.</p> + </dd> + <dt><code>inherit</code></dt> <dd>Der Wert des Elternelements wird geerbt.</dd> </dl> +<dl> + <dd>.</dd> +</dl> + +<h2 id="Formale_Definition">Formale Definition</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formale_Syntax">Formale Syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + <h2 id="Beispiele">Beispiele</h2> -<p><a href="http://developer.mozilla.org/samples/cssref/float.html" rel="external nofollow">Live Beispiel</a></p> +<h3 id="How_floated_elements_are_positioned" name="How_floated_elements_are_positioned">Wie fließende Elemente positioniert werden</h3> + +<p>Wie oben erwähnt, wird ein Element, wenn es fließend (floated) ist, wird es aus dem normalen Fluss des Dokuments herausgenommen (obwohl es immer noch Teil des Dokuments bleibt). Es wird nach links oder rechts verschoben, bis es die Kante seines Behälters oder eines anderen schwebenden Elements berührt.</p> + +<p>In diesem Beispiel gibt es drei farbige Quadrate. Zwei davon sind nach links und eines nach rechts geschoben. Beachten Sie, dass das zweite "linke" Quadrat rechts vom ersten platziert wird. Weitere Quadrate würden weiter nach rechts gestapelt werden, bis sie den enthaltenden Kasten gefüllt haben, wonach sie in die nächste Zeile umbrechen würden.</p> -<pre class="brush: html"><style type="text/css"> - div { border: solid red; max-width: 70ex; } - h4 { float: left; margin: 0; } -</style> +<p>Ein schwebendes Element ist mindestens so hoch wie seine höchsten verschachtelten fließenden Kinder. Wir gaben dem Elternteil die Breite von 100% (<code>width: 100%</code>) und haben es fließen lassen, um sicherzustellen, dass es hoch genug ist, um seine fließenden Kinder zu umfassen, und um sicherzustellen, dass es die Breite des Elternteils einnimmt, damit wir sein benachbartes Geschwisterkind nicht überdecken müssen.</p> -<div> - <h4>HELLO!</h4> - This is some text. This is some text. This is some text. - This is some text. This is some text. This is some text. - This is some text. This is some text. This is some text. - This is some text. This is some text. This is some text. -</div> +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><section> + <div class="left">1</div> + <div class="left">2</div> + <div class="right">3</div> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Morbi tristique sapien ac erat tincidunt, sit amet dignissim + lectus vulputate. Donec id iaculis velit. Aliquam vel + malesuada erat. Praesent non magna ac massa aliquet tincidunt + vel in massa. Phasellus feugiat est vel leo finibus congue.</p> +</section> </pre> -<div style="border: solid red; max-width: 70ex;"> -<h4 id="HELLO!" style="float: left; margin: 0;">HELLO!</h4> -This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">section { + border: 1px solid blue; + width: 100%; + float: left; +} + +div { + margin: 5px; + width: 50px; + height: 150px; +} + +.left { + float: left; + background: pink; +} -<h2 id="Spezifikationen">Spezifikationen</h2> +.right { + float: right; + background: cyan; +}</pre> + +<h4 id="Ergebnis">Ergebnis</h4> + +<p>{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}</p> + +<h3 id="Clearing_floats" name="Clearing_floats">Auflösung von floats</h3> + +<p>Manchmal möchten Sie vielleicht erzwingen, dass ein Element unter alle schwebenden Elemente verschoben wird. Beispielsweise möchten Sie vielleicht, dass Absätze neben den Fließkommazahlen bleiben, aber Überschriften zwingen, auf ihrer eigenen Zeile zu stehen. Siehe {{cssxref("clear")}} für Beispiele.</p> + +<h2 id="Spezifikation">Spezifikation</h2> <table class="standard-table"> <thead> @@ -75,29 +210,24 @@ This is some text. This is some text. This is some text. This is some text. This <tr> <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td> <td>{{Spec2('CSS Logical Properties')}}</td> - <td>Adds the values <code>inline-start</code> and <code>inline-end</code>.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td> - <td>{{Spec2('CSS3 Box')}}</td> - <td>Lots of new values, not all clearly defined yet. Any differences in behavior, unrelated to new features, are expected to be unintentional; please report.</td> + <td>Neue Werte <code>inline-start</code> und <code>inline-end</code>.</td> </tr> <tr> <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td> <td>{{Spec2('CSS2.1')}}</td> - <td>No change</td> + <td>Keine Änderungen</td> </tr> <tr> <td>{{SpecName('CSS1', '#float', 'float')}}</td> <td>{{Spec2('CSS1')}}</td> - <td>Initial definition</td> + <td>Ursprüngliche Deinition</td> </tr> </tbody> </table> <h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2> -{{Compat("css.properties.float")}} +<p>{{Compat("css.properties.float")}}</p> <h2 id="Siehe_auch">Siehe auch</h2> @@ -105,5 +235,3 @@ This is some text. This is some text. This is some text. This is some text. This <li><a href="/de/CSS/clear"><code>clear</code></a></li> <li><a href="/de/CSS/Boxmodell">Boxmodell</a></li> </ul> - -<p>{{ languages( {"en": "en/CSS/float", "fr": "en/CSS/float", "es": "es/CSS/float", "pl": "pl/CSS/float"} ) }}</p> |