Float left funktioniert nicht wie es sollte

Question

Ich versuche einige Divs Float links zu machen, um einige Dropdown-Menü zu erstellen. Mein Problem ist das. Wenn ich nach links schwebe, außer das div nach dem ersten hat auch float: links, es wird in das erste div gehen.

Ich kann nicht float: links, auf alles, weil es bedeutet, dass ich nichts wirklich tun kann. Es hat schon früher funktioniert, aber ich bin mir nicht sicher, warum sie ineinander reingehen?

#box1 { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: red; 
 
    float: left; 
 
} 
 
#box2 { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: blue; 
 
}

<div id="box1"> 
 
</div> 
 
<div id="box2"> 
 
</div>

Answer 1

machen sowohl die divs float links

#box1{ 
    width: 200px; 
    height: 100px; 
    background-color: red; 
    float: left; 
    } 
    #box2{ 
    width: 200px; 
    height: 100px; 
    background-color: blue; 
float:left 
    } 

Div ist selbst ein Blockelement, um es Inline-Einsatz Schwimmer auf beiden divs

Answer 2

gerade scheint zu funktionieren schön mit dem von Asif Ahmed vorgeschlagenen Input.

Fügen Sie einfach float: left; bei # box2

(hinzugefügt Rand seiner zeigen nicht überlappende)

https://jsfiddle.net/jwe5cohy/