邊框不包括圖像

Question

任何人都可以幫我接觸掩蓋圖像嗎？

它只遵循文本。 如果我的文字較長，那麼邊界與

這裏我是HTML代碼中的字體大小

<div id = "guitar"> 

      <img src="christmas.jpg" alt="guitar" width="500" height="300" class="imgleft"> </img> 


        <h1>Guitar</h1> 

        Visit the three ghosts of Christmas this November as the PLAYHOUSE Whitley Bay kicks off the festive season with a fantastic Disney-esque musical production of A Christmas Carol. 


     </div> 

這裏是我的CSS

#guitar { border : 5px solid; 
     padding : 10px; 
     margin-bottom : 2%; 
    } 
.imgleft{float:left;} 

Answer 1

需要清除浮動圖像。該simples辦法做到這一點是通過採用溢流規則容器：

#guitar { 
    border : 5px solid; 
    padding : 10px; 
    margin-bottom : 2%; 
    overflow: auto; /* <--- this rule does the trick */ 
} 

Answer 2

而不是使用overflow屬性，嘗試清除的#guitar的:after的浮動，因爲overflow有時會在您的箱子多餘空間。

#guitar:before, #guitar:after { 
    content: ''; 
    display: table; 
} 

#guitar:after { 
    clear: both; 
}