Grenze in css nicht passend nach div

Question

Ich möchte einfach eine rote Grenze über die #cont hinzufügen, aber wenn ich diese drei Boxen schweben die Grenze funktioniert nicht und es kommt nur oben nicht Wrapping all die div.wie auch immer ich verwenden kann Überlauf: auto. es funktioniert, aber ich wollte nur wissen, warum es nicht ohne Überlauf funktioniert.

HTML:

<div id ="cont"> 
    <div class ="box" > box1 </div> 
    <div class ="box" > box2 </div> 
    <div class ="box" > box3 </div> 
</div> 
<div id="foo">footer</div> 

CSS:

#cont { 
    width:950px; 
    border:1px solid red; 
} 
.box { 
    width:300px; 
    height:100px; 
    border:1px solid black; 
    background-color:orange; 
    float:left;  
} 
#foo { 
    width:100px; 
    background-color:blue; 
    clear:both; 
} 

Answer 1

Floated divs wird nicht das Haupt div nach dem childs.add ein zusätzliches div wachsen lassen um die Hauptdivs-Höhe beizubehalten.

<div id ="cont"> 
    <div class ="box" > box1 </div> 
    <div class ="box" > box2 </div> 
    <div class ="box" > box3 </div> 
    <div class ="clrfx" > </div> 
</div> 
<div id="foo"> footer </div> 

und die CSS für neue div

.clrfx{ 
    clear:both; 
} 

Answer 2

Verwenden Display:inline-block Eigenschaft in Ihrem Kasten

#cont{ 
 
width:950px; 
 
border:1px solid red; 
 
float:left; 
 
} 
 
.box{ 
 
    width:300px; 
 
    height:100px; 
 
    border:1px solid black; 
 
    background-color:orange; 
 
     float:left; 
 
     display:inline-block; 
 
} 
 
#foo{ 
 
    width:100px; 
 
    background-color:blue; 
 
    clear:both; 
 
}

<div id ="cont"> 
 
    <div class ="box" > box1 </div> 
 
    <div class ="box" > box2 </div> 
 
    <div class ="box" > box3 </div> 
 
</div> 
 
<div id="foo"> footer </div>

Answer 3

Sie müssen die Schwimm löschen. Css clear property Etwas wie folgt aus:

#cont:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

See here.