Testen Sie Ihre Fähigkeiten: Floats

Das Ziel dieses Fähigkeitstests ist es, zu überprüfen, ob Sie Floats in CSS mit den Eigenschaften und Werten float und clear sowie andere Methoden zum Beseitigen von Floats verstehen. Sie werden drei kleine Aufgaben durchgehen, die verschiedene Elemente des Materials nutzen, das Sie gerade behandelt haben.

Hinweis: Klicken Sie auf "Play" in den untenstehenden Code-Blöcken, um die Beispiele im MDN Playground zu bearbeiten. Sie können den Code auch kopieren (klicken Sie auf das Klemmbrettsymbol) und in einen Online-Editor wie CodePen, JSFiddle, oder Glitch einfügen. Wenn Sie nicht weiterkommen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.

Aufgabe 1

In dieser Aufgabe sollen Sie die beiden Elemente mit den Klassen float1 und float2 links bzw. rechts floaten lassen. Der Text sollte dann zwischen den beiden Boxen erscheinen, wie in dem Bild unten gezeigt:

Zwei Blöcke, die links und rechts von etwas Text angezeigt werden.

Versuchen Sie, den untenstehenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:

html

<div class="box">
  <div class="float float1">One</div>
  <div class="float float2">Two</div>
  <p>The two boxes should float to either side of this text.</p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
* {
  box-sizing: border-box;
}
.box {
  padding: 0.5em;
}
.float {
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rebeccapurple;
  color: #fff;
  padding: 1em;
}

css

.float1 {
}

.float2 {
}

Klicken Sie hier, um die Lösung anzuzeigen

Sie können float für beide Boxen verwenden:

css

.float1 {
  float: left;
}

.float2 {
  float: right;
}

Aufgabe 2

In dieser Aufgabe soll das Element mit der Klasse float nach links gefloatet werden. Dann möchten wir, dass die erste Textzeile neben diesem Element angezeigt wird, aber die folgende Zeile (die die Klasse below hat) darunter angezeigt wird.

Ihr Endergebnis sollte wie das Bild unten aussehen:

Eine Box, die links von einer Textzeile angezeigt wird, mit weiterem Text darunter.

Versuchen Sie, den untenstehenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:

html

<div class="box">
  <div class="float">Float</div>
  <p>This sentence appears next to the float.</p>
  <p class="below">Make this sentence appear below the float.</p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
* {
  box-sizing: border-box;
}
.box {
  padding: 0.5em;
}
.float {
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rebeccapurple;
  color: #fff;
  padding: 1em;
}

css

.float {
}

.below {
}

Klicken Sie hier, um die Lösung anzuzeigen

Sie müssen das Element nach links fließen lassen und dann clear: left zur Klasse für den zweiten Absatz hinzufügen:

css

.float {
  float: left;
}

.below {
  clear: left;
}

Aufgabe 3

In dieser Aufgabe haben wir ein gefloatetes Element. Die Box, die den Float und den Text umschließt, wird hinter dem Float angezeigt. Verwenden Sie die modernste verfügbare Methode, um den Boxhintergrund so zu gestalten, dass er bis unter den Float reicht, wie im Bild unten gezeigt:

Ein Block, der rechts von etwas Text angezeigt wird, beide umschlossen von einer Box mit Hintergrundfarbe.

Versuchen Sie, den untenstehenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:

html

<div class="box">
  <div class="float">Float</div>
  <p>This sentence appears next to the float.</p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
* {
  box-sizing: border-box;
}

.box {
  padding: 0.5em;
}

.float {
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207 232 220);
  padding: 1em;
  color: #fff;
}

.box {
  background-color: rebeccapurple;
  padding: 10px;
  color: #fff;
}

css

.float {
  float: right;
}

.box {
}

Klicken Sie hier, um die Lösung anzuzeigen

Räumen Sie die Box unter dem gefloateten Element auf, indem Sie display: flow-root zu der Klasse für .box hinzufügen. Andere Methoden könnten die Verwendung von overflow oder eines clearfix-Hacks sein, jedoch wird in den Lernmaterialien die flow-root Methode als moderner Weg beschrieben, um dies zu erreichen.

css

.box {
  display: flow-root;
}

Siehe auch

CSS-Bausteine