In HTML mit clear arbeiten

Mit clear das Umfließen von Elementen beenden

Heute zeige ich eine von vielen Methode wie man in HTML mit clear arbeitet und somit zum Beispiel zwei CSS Classen (die eine links die andere rechts mit einem float ausgerichtet) richtig „beendet” und somit das float wieder aufhebt. Wir legen zu nächst in unserer CSS Datei eine Classe mit dem folgenden Befehl an:

.clear			{clear: both;}

Wenn wir jetzt zB. eine Content-Classe und eine Sidebar-Classe einmal "left" und einmal "right" floaten setzen wir im HTML Code ganz einfach unsere Classe „.clear” unter der Sidebar- und Content-Classe ein. Das sieht dann wie folgt aus:

<div class="content">mit einem float:left versehen</div>
<div class="sidebar">mit einem float:right versehen</div>
<div class="clear">beendet das float von den Classen darüber</div>

Warum ein clear im HTML Quellcode?

Wenn wir kein clear verwenden würden, würde die Classe unter der Sidebar und dem Content (welches die footer-Classe in unserem Fall wäre) einfach nach oben rutschen und somit in die Content- und Sidebar-Classe hinnein.

html-clear

Dieses ineinander rutschen vermeiden!

Um dieses ineinadner rutschen zu vermeiden verwenden wir das clear als Classe im HTML Quellcode. Das Endergebnis, so wie es sein soll, sieht dann wie folgt aus:

Um das Ganze nochmal genau nachvollziehen zu können was das clear im HTML nun eigentlich bewirkt ein Praxisbeispiel (mit Quellcode) und dem Endergebnis siehe "2. Bild".

HTML:

<div class="content">mit einem float:left versehen</div>
                
<div class="sidebar">mit einem float:right versehen</div>
                
<div class="clear">beendet das float nach oben hin</div>
                
<div class="footer">
sonst würde der footer in die zwei vorherigen Classe rutschen
</div>

CSS:

        
.sidebar {
		width: 220px;
		height: auto;
		float: right;}
                
.content {
		width: 520px;
		height: auto;
		float: left;} 

.footer	{
		width: 740px;
		height: auto;}                
      
.clear {    
		clear: both;}