边框不包括图像

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; 
}