Gibt es einen Unterschied zwischen float: none und clear: none
4 Antworten
Float:none; teilt den Elementen mit, dass sie nicht floaten möchten.
Clear sagt anderen Elementen, ob sie floaten dürfen oder nicht, und im Falle von none lassen Sie Floats auf beiden Seiten zu. Wenn Sie also clear:both; verwenden, stoppt Floating.
Sie sind zwei völlig verschiedene Dinge.
float wird ein Element nach links oder rechts (der Parameter) innerhalb seines Elternelements ausrichten. float: none macht nichts, es sei denn, das Element war bereits floating. Das Float-Element verliert seine automatisch gefüllte Breite und reduziert es auf den kleinsten Wert.
clear stellt sicher, dass auf der Seite, die Sie sagen, keine schwebenden Elemente vorhanden sind. Wenn es einen gibt, wird er nach unten bewegt, bis keiner mehr in der angegebenen Richtung ist. clear: both prüft dies für beide Richtungen.
Hier ist eine Illustration, die Ihnen zeigt, was floats und clears tun.
Es scheint, als hätten Sie das zugrundeliegende Konzept von float nicht verstanden. Jeder Wert von float außer none , wenn er einem Element auf Blockebene zugewiesen wird entfernt dieses Element aus dem Dokumentfluss . Angenommen, Sie haben zwei verschiedene div -Elemente, eines mit float:none und das andere mit clear:none . Nun könnte der spätere entweder im Dokumentfluss oder out des Dokumentflusses sein - abhängig von seinem Gleitkommawert. Ich präsentiere Ihnen zwei Beispiele. In der ersten Version verwendet der rote Absatz float:none und in der zweiten Version verwendet der rote Absatz clear: none
Roter Absatz mit float:none :
Roter Absatz mit clear:none :
Sie können den Unterschied bei der Verwendung von clear: none und float: none jetzt sehen. Ich empfehle Ihnen, zuerst das Konzept von float und clear aus diesem Tutorial der w3.org-Community clear
Float none verhindert, dass ein Element aufhört, sich um angrenzende untergeordnete Elemente zu legen. Standardmäßig haben alle Elemente float none. Löschen Sie beide Stoppelemente, um alle untergeordneten Elemente von links oder rechts zu umschließen. Für weitere Details und Live-Beispiele, besuchen Sie mein Tutorial, Ссылка .