Gibt es einen Unterschied zwischen float: none und clear: none

Question

Ich machte ein paar Sachen mit float und clear. Ich habe keinen Unterschied gefunden mit float: none; oder Gibt es irgendwelche? Kann jemand den Unterschied mit einem Beispiel illustrieren

Answer 1

Float:none; teilt den Elementen mit, dass Sie nicht möchten, dass es schwebt.

Clear sagt anderen Elementen, ob sie floaten dürfen oder nicht, und im Falle von keiner, erlauben Sie Floats auf beiden Seiten. Deshalb, wenn Sie clear:both; verwenden, stoppt das Floaten.

Answer 2

Sie sind zwei völlig verschiedene Dinge.

float wird ein Element nach links oder rechts (der Parameter) innerhalb seiner Eltern ausrichten. float: none tut nichts, es sei denn, das Element schwebte bereits. Das Schwebekörperelement verliert seine automatisch gefüllte Breite und reduziert es auf so klein wie möglich.

clear wird sicherstellen, dass es keine schwebenden Elemente auf der Seite gibt, die Sie erzählen. 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, um Ihnen zu zeigen, was floats und clears tun.

Answer 3

Float keine stoppt ein Element wraping um benachbarte schwimmende Kind-Elemente zu stoppen. Standardmäßig haben alle Elemente float none. Löschen Sie beide Stoppelemente, um alle schwebenden untergeordneten Elemente von links oder rechts zu umschließen. Für weitere Details und Live-Beispiele, besuchen Sie mein Tutorial, http://tutorial.techaltum.com/css_float.html.

Answer 4

Es scheint, als ob Sie das zugrundeliegende Konzept dessen, was float tut, nicht verstanden haben. Jeder Wert von float außer none, wenn er einem Element auf Blockebene zugewiesen wurde 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 in der Dokumentfluss oder aus des Dokumentflusses sein - abhängig von seinem Gleitkommawert. Ich präsentiere Ihnen zwei Beispiele.In der ersten Version der Red Absatz verwendet float:none und in der zweiten Version der Red Absatz verwendet clear: none

Red Absatz mit float:none:

#usefloatnone 
 
{ 
 
    border: 1px dotted black; 
 
    background-color: red; 
 
    width: 1050px; height: 350px; 
 
    
 
    float: none; 
 
} 
 

 
#useclearnone 
 
{ 
 
    border: 1px dotted black; 
 
    background-color: red; 
 
    width: 1050px; height: 200px; 
 
    float: right; 
 
    
 
    clear: none; 
 
} 
 

 
#normal 
 
{ 
 
    border: 1px dotted black; 
 
    width: 1050px; height: 100px; 
 
}

</style> 
 

 
    </head> 
 
    <p id="usefloatnone"> Red paragraph </p> 
 
    <p id="normal"> Normal paragraph </p> 
 
    <p id="normal"> Normal paragraph </p> 
 
    <p id="normal"> Normal paragraph </p> 
 
</html>

Red Absatz mit clear:none:

#usefloatnone 
 
{ 
 
    border: 1px dotted black; 
 
    background-color: red; 
 
    width: 1050px; height: 350px; 
 
    
 
    float: none; 
 
} 
 

 
#useclearnone 
 
{ 
 
    border: 1px dotted black; 
 
    background-color: red; 
 
    width: 1050px; height: 200px; 
 
    float: right; 
 
    
 
    clear: none; 
 
} 
 

 
#normal 
 
{ 
 
    border: 1px dotted black; 
 
    width: 1050px; height: 100px; 
 
}

<p id="useclearnone"> Red paragraph </p> 
 
    <p id="normal"> Normal paragraph </p> 
 
    <p id="normal"> Normal paragraph </p> 
 
    <p id="normal"> Normal paragraph </p>

können Sie den Unterschied in der Wirkung sehen, während clear: none und float: none jetzt verwenden. Ich empfehle Ihnen, zunächst das Konzept von float und clearfrom this tutorial by w3.org community zu verstehen. Sie verwenden clear Eigenschaft für Elemente, wenn Sie alle schwebenden Elemente um/(normalerweise links oder rechts davon) löschen möchten.