您缺少的部分是清除floats。用这个：
li:after {
content: '';
display: block;
clear: both;
}
现在您将删除“嵌套”。
请注意，在使用浮动容器时，应始终将clear 它们放置在紧随其后的下一个容器之前，从而在调用它时创建新的 块格式化上下文 。否则，您将看到不可预测的行为。
修改后的演示如下：
img {
float: left;
margin-right: 0.1em;
}
li:after {
content: '';
display: block;
clear: both;
}
<ul>
<li>
<h3>photo</h3>
<img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" /> some text next to the photo
</li>
<li>
<h3>photo</h3>
<img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" /> some text next to the photo
</li>
<li>
<h3>photo</h3>
<img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" /> some text next to the photo
</li>
</ul>
602392714
清零编程群