CSS-Layout – klar und klarfixiert


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Die CSS-Eigenschaft clear

Wenn wir die Eigenschaft float verwenden und wollen Für das nächste Element unten (nicht rechts oder links) müssen wir clear verwenden Eigentum.

Die Eigenschaft clear gibt an, was sollte mit dem Element passieren, das sich neben einem schwebenden Element befindet.

Die Eigenschaft clear kann eine der folgenden Eigenschaften haben: folgende Werte:

none

- Das Element wird nicht unter linke oder rechte schwebende Elemente verschoben. Dies ist die Standardeinstellung

left

- Das Element wird unter die linken schwebenden Elemente geschoben

right

- Das Element wird unter die rechten schwebenden Elemente geschoben

both

- Das Element wird sowohl unter das linke als auch das rechte schwebende Element geschoben

inherit

- Das Element erbt den klaren Wert von seinem übergeordneten Element

Wenn Sie Floats löschen, sollten Sie das Clear dem Float zuordnen: Wenn ein Element nach links schwebt, dann sollten Sie nach links ausweichen. Ihr schwebendes Element wird weiterhin schweben, aber das gelöschte Element wird darunter im Web angezeigt Seite.

Beispiel

In diesem Beispiel wird der Float nach links gelöscht. Hier bedeutet es, dass Das Element wird unter das linke schwebende -Element verschoben:

div1 {
  float: left;
}
div2 {
  clear: left;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>
</html>



Der Clearfix-Hack

Wenn ein schwebendes Element höher ist als das enthaltende Element, wird es wird außerhalb seines Containers „überlaufen“. Wir können dann einen Clearfix-Hack hinzufügen Löse dieses Problem:

Without Clearfix

With Clearfix

Beispiel

.clearfix {
  overflow: auto;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix {
  overflow: auto;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>


Der overflow: auto Clearfix funktioniert gut, solange Sie in der Lage sind, die Kontrolle über Ihre Ränder und Abstände zu behalten (andernfalls würden Sie möglicherweise werden Bildlaufleisten angezeigt). Der Der neue, moderne Clearfix-Hack ist jedoch sicherer zu verwenden und der folgende Code wird für die meisten Webseiten verwendet:

Beispiel

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>


Mehr über das Pseudoelement ::after erfahren Sie in einem späteren Kapitel.