问题与同一div中的文本和img对齐

Question

<style type="text/css">
    .floatright {
        float: right;
        width: 100px;
        margin: 0 0 10px 10px;
    }
</style>
<div class="floatright">
    <img class="floatright" src="computer.png" alt="" width="100" height="100" /><br />
    Caption here
</div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, </p>

问题：

如果我删除此行：width: 100px;，文字Caption here将不会与img的左边缘对齐，为什么？

Answer 1

因为float与元素一起使用，其宽度被压缩以允许其他项目与其对齐，并且您使用100px宽度，图像也是100px，因为它不会对齐其下的标题，但div下的段落文本将在img之后使用break标记对齐它和你的alos，标题文本将无法与img对齐