Linuchs: ::after und clear:both

Beitrag lesen

SELF-Forum

::after und clear:both

Linuchs
– Informationen zu den Bewertungsregeln

So wie ich das auf die Schnelle überblicke möchtest du .inhalt clearen.

Hallo Matthias,

Nein, .inhalt umschliesst die beiden Spalten und floatet selbst nicht. Habe deinen Vorschlag dennoch ausprobiert. Wie erwartet, fruchtet das clear:both; natürlich nicht.

Habe mal für das Beispiel eine Extra-Datei gemacht, um evtl. andere Störgrößen rauszunehmen:

<html>  
<head>  
<meta http-equiv="content-type"  content="text/html;charset=UTF-8">  
  
<style type="text/css">  
div.inhalt div:nth-of-type(1) {  
  width: 48%;  
  float: left;  
}  
div.inhalt div:nth-of-type(2) {  
  width: 48%;  
  float: right;  
}  
/* clear mit CSS:  
div.inhalt div:nth-of-type(2)::after {  
  content: " ";  
  clear: both;  
}  */  
/* clear mit HTML: */  
.clear {  
  clear: both;  
}  
</style>  
</head>  
  
<body>  
<div class=inhalt>  
  <h3>1. Überschrift</h3>  
  <div>  
    <p>Links 1. Absatz</p>  
    <p>Links 2. Absatz</p>  
    <p>Links 3. Absatz</p>  
    <p>Links 4. Absatz</p>  
  </div>  
  <div>  
    <p>Rechts 1. Absatz</p>  
    <p>Rechts 2. Absatz</p>  
  </div>  
  <p class=clear></p>  
</div>  
  
<div class=inhalt>  
  <h3>2. Überschrift</h3>  
  <div>  
    <p>Links 1. Absatz</p>  
    <p>Links 2. Absatz</p>  
    <p>Links 3. Absatz</p>  
    <p>Links 4. Absatz</p>  
  </div>  
  <div>  
    <p>Rechts 1. Absatz</p>  
    <p>Rechts 2. Absatz</p>  
  </div>  
  <p class=clear></p>  
</div>  
</body>  
  
</html>

Bei der HTML-Variante sieht es wie gewünscht aus. .inhalt wird auber abgeschlossen und 2. Überschrift belegt eine neue Zeile.

Jetzt wechsle ich CSS auf

/* clear mit CSS:  */  
div.inhalt div:nth-of-type(2)::after {  
  content: " ";  
  clear: both;  
}  
/* clear mit HTML:  
.clear {  
  clear: both;  
}  */

und "2. Überschrift" steht rechts neben "Links 3. Absatz", clear fruchtet also nicht. In den gefundenen Bespielen hat content: "xxx"; immer einen Wert. Aber daran liegt es aiuch nicht.

Linuchs

Beitrag melden
–
Informationen zu den Bewertungsregeln