Articles
Einführung in CSS
Float-bezogene CSS-Eigenschaften

Float-bezogene CSS-Eigenschaften

Dieser Artikel erklärt float-bezogene CSS-Eigenschaften.

Sie können die Verwendung und Syntax der Eigenschaften float und clear lernen.

YouTube Video

HTML zur Vorschau

css-float.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-float.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Layout</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>float</h3>
23            <section style="height: auto; color: black;">
24                <header><h4>float: left</h4></header>
25                <section class="sample-view">
26                    <div class="float-left">float left</div>
27                    <div class="content">
28                        <p>
29                            paragraph 1-1
30                            paragraph 1-2
31                        </p>
32                        <p>paragraph 2</p>
33                    </div>
34                    <div class="clearfix"></div>
35                </section>
36            </section>
37        </article>
38    </main>
39</body>
40</html>

Float-bezogene CSS-Eigenschaften

float- und clear-Eigenschaften 

 1.float-left {
 2    float: left;
 3    width: 150px;
 4    margin-right: 20px;
 5    background-color: lightblue;
 6}
 7
 8.content {
 9    width: 300px;
10    height: 100px;
11}
12
13.content p {
14    background-color: lightblue;
15    margin: 10px;
16}
17
18.clearfix {
19    clear: both;
20    display: none;
21}

float ist eine der CSS-Eigenschaften, mit der ein Element innerhalb seines Elternelements nach links oder rechts ausgerichtet wird, sodass andere Elemente es umfließen können. Die float-Eigenschaft wird häufig verwendet, um Bilder oder Box-Elemente um Text herum anzuordnen, aber ihre Verwendung hat abgenommen, da neuere Layout-Methoden wie flex und grid immer häufiger eingesetzt werden.

  • In der Klasse float-left wird die float-Eigenschaft auf left gesetzt. Das angewendete Element schwebt auf die linke Seite des Elternelements, und das nächste Element fließt rechts herum.
  • In der Klasse clearfix wird die clear-Eigenschaft auf both gesetzt. Die Verwendung dieser Klasse verhindert, dass das nächste Element um das schwebende Element herumfließt. Hier verhindern wir, dass das nächste Element nach dem Bild schwebt, um das Layout beizubehalten.

Wie man float verwendet

Werte
  • left: Schwebt das Element nach links, sodass andere Elemente rechts herumfließen können.
  • right: Schwebt das Element nach rechts, sodass andere Elemente links herumfließen können.
  • none: Dies ist der Standardwert und lässt das Element nicht schweben.
  • inherit: Erbt den Wert der float-Eigenschaft vom Elternelement.
clear-Eigenschaft
  • Beim Verwenden von float kann das nächste Element um das schwebende Element herumfließen. Um dies zu vermeiden, wird die clear-Eigenschaft verwendet. Die Werte für clear sind wie folgt:.
    • left: Verhindert Elemente, die nach links schweben.
    • right: Vermeidet Elemente, die nach rechts gefloatet sind.
    • both: Vermeidet Elemente, die sowohl nach links als auch nach rechts gefloatet sind.
    • none: Ermöglicht es Elementen, umherzufließen. Dies ist der Standardwert.

Notizen

  • Beim Einsatz von float kann es vorkommen, dass die Höhe des Elternelements die Höhe des gefloateten Elements ignoriert. Um dies zu vermeiden, verwenden Sie die clearfix-Technik oder overflow: hidden; im Elternelement.
  • Im responsiven Design oder bei komplexen Layouts kann float schwieriger zu handhaben sein als flex oder grid, daher wird die Verwendung von flex oder grid empfohlen.
Zusammenfassung

float ist eine alte Technik, um Elemente nach links oder rechts schweben zu lassen, damit Text oder andere Elemente sie umfließen können. Es wird immer noch manchmal für einfache Layouts oder das Umbrechen von Bildern verwendet. Für flexiblere und einfachere Layouts wird jedoch die Verwendung von flexbox oder grid empfohlen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

CSS-Eigenschaften im Zusammenhang mit der Benutzeroberfläche