Pourquoi les deux ne fonctionnent pas correctement en css?

Question

Mon code est ici, je mets la clear:both de div2 dans ma feuille de style, mais le div3 flottent encore à côté:

#div1 { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: antiquewhite; 
 
    float: left; 
 
    clear: left; 
 
} 
 

 
#div2 { 
 
    width: 20em; 
 
    height: 200px; 
 
    background-color: seagreen; 
 
    float: left; 
 
    clear: both; 
 
} 
 

 
#div3 { 
 
    width: 600px; 
 
    height: 3cm; 
 
    background-color: red; 
 
    float: left; 
 
}

<div id="div1"> 
 
    div1 
 
</div> 
 

 
<div id="div2"> 
 
    div2 
 
</div> 
 

 
<div id="div3"> 
 
    div3 
 
</div>

L'effet du flotteur:

Vous voyez le div3 est à côté de div2, mais m y div2 est clair à la fois, pourquoi l'obtenir? J'ai test dans firefox et safari, pas de différence.

Answer 1

clear signifie qu'un élément ne flambera pas à côté d'un élément flottant précédent.

Depuis div2 est clear: both, il ne se déplace pas à côté div1.

Depuis div2 est float: left, il se déplace vers la gauche et div3 bouillonne à côté.

div3 n'a pas clear donc rien ne l'empêche de bouillonner.

Answer 2

vous pouvez également ajouter clear à div3.