Was bedeutet "both" in <div style="clear:both">

Question

<div style="float:left">Hello</div>
<div style="float:right">Howdy dere pardner</div>
<div style="clear:both"></div>

Ich verstehe, was sie tut, aber warum der Name both ? Was bedeutet both mittlere ?

Answer 1

Beides bedeutet "jedes Element in einer Menge von zwei Dingen". Die beiden Dinge sind "links" und "rechts".

Answer 2

Beschreibung der möglichen Werte:

• left : Keine schwebenden Elemente auf der linken Seite erlaubt
• right : Keine schwebenden Elemente auf der rechten Seite erlaubt
• both : Keine schwebenden Elemente auf der linken oder rechten Seite erlaubt
• none : Standard. Erlaubt schwebende Elemente auf beiden Seiten
• inherit : Gibt an, dass der Wert der Eigenschaft clear vom übergeordneten Element geerbt werden soll

Quelle: w3schools.com

Answer 3

Clear:both gibt Ihnen den Raum dazwischen.

Zum Beispiel Ihr Code:

  <div style="float:left">Hello</div>
  <div style="float:right">Howdy dere pardner</div>

Wird derzeit angezeigt als :

Hello  ...................   Howdy dere pardner

Wenn Sie dem obigen Schnipsel Folgendes hinzufügen,

  <div style="clear:both"></div>

Dazwischen wird sie als angezeigt:

Hello ................ 
                       Howdy dere pardner

die Ihnen den Raum zwischen "Hallo" und "Hallo, Partner" lässt.

Js fiiddle http://jsfiddle.net/Qk5vR/1/