Richtiges "Clearen"

A

Alice

Erfahrenes Mitglied
Hallo.

Wenn ich z.B. zwei oder mehr DIV-Container in einer Reihe (nebeneinander) darstellen möchte, verwende ich dafür "float:left;" und "cleare" am ende.

HTML: 
<div style="float:left;width:33,3%;">
   Links
</div>
<div style="float:left;width:33,3%;">
   Mitte
</div>
<div style="float:left;width:33,3%;">
   Rechts
</div>
<div style="clear:both;"></div>

1. Frage:
Muss man auch "clearen" wenn man nur einen DIV-Conatiner (mit der float Eigenschaft) hat?

2. Frage:
Ich habe zwei DIV-Container. Der eine floatet links und der andere hat eine absolute Position. Muss hier "gecleart" werden?
 
Zu 1.: Nicht zwingend.
Wenn das gefloatete Element von einem anderen umgeben wird (was es ja i.d.R. ist) dann kann das umgebende auch mit der Eigenschaft
Code: 
overflow: hidden;
versehen werden. Das verursacht ebenfalls ein clearen, ohne zusätzliches Element.
Eine weitere Variante wäre das Pseudo-Element after, welches man ebenfalls zum clearen verwenden kann.

Zu 2.: Das 2. Element interessiert es nicht was mit dem anderen Element passiert, da es durch die absolute Positionierung aus dem Fluss genommen wird.
 
Probier's auch mal mit inline-block

HTML: 
<div style="display:inline-block;width:33,3%;">
      Links
</div><div style="display:inline-block;width:33,3%;">
      Mitte
</div><div style="display:inline-block;width:33,3%;">
      Rechts
</div>
 
Hi,
was die anderen gesagt haben trifft voll zu.
Aber merke dir wer floatet muss auch clearen. Wenn man das nämlich nicht macht kann es sein das man plötzlich da steht und nicht mehr versteht warum sich ein folgendes Element nicht so verhält wie gewünscht.

Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück