div ID爲 「包裝」 不盒模型運行

Question

我創建了CSS的ID包裝：

#wrapper { 
    position: relative; 
    background: yellow; 
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); 
    width: 960px; 
    padding: 40px 35px 35px 35px; 
    margin: 0px auto; 
} 

類框在CSS：

float: left; 
width: 170px; 
height: 190px; 
margin: 10px; 
border: 3px solid #8AC007; 
border-radius: 5px; 
right: auto; 

HTML：

<div id="wrapper"><div class="box"> 
    <a href="#"><p>ini box 1</p></a>  
</div> </div> 

的問題是盒子是從包裝盒出來的。什麼是靈魂？

Answer 1

將overflow: auto添加到包裝以清除箱子的浮動。

Answer 2

我總是建議花車經過清除元件，老IE尤其是不可預知的行爲沒有他們

<div id="wrapper"> 
    <div class="box"> 
     <a href="#"><p>ini box 1</p></a>  
    </div> 
    <div class='clr'></div> 
</div> 

額外的CSS

.clr { 
    clear:both; 
    height:0px; 
} 

Answer 3

刪除浮動：從盒子CSS左風格

.box { 
    width: 170px; 
    height: 190px; 
    margin: 10px; 
    border: 3px solid #8AC007; 
    border-radius: 5px; 
    right: auto; 
}