请教有关前端 CSS float、clear 属性的相关问题

第一个问题：
在实践 MDN CSS Getting Started tutorial - Layout Floats 一节时，结果和图示有出入。因为有 h3 {clear: left;} 这条规则，所以 (B) Numbered paragraphs 应当在无序列表的下方，浏览器的结果也是如此。
请问是不是 MDN 出错了？

第二个问题：
直接上代码……
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style3.css" />
</head>
<body>
    <div class="wrapper">

    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <img id="yellow-pin" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png" alt="Yellow pin" />
    <p class="left">This paragraph clears left.</p>
    </div>
</body>
</html>

CSS

.wrapper{
    border:1px solid black;
    padding:10px;
}
.left {
    border: 1px solid black;
    clear: left;
}
.black {
    float: left;
    margin: 0px;
    background-color: black;
    color: #fff;
    width: 20%;
}
.red {
    float: left;
    margin: 0px;
    background-color: red;
    width:20%;
}
p {
    width: 50%;
}
#yellow-pin {
    border: 2px dotted #ccc;
    clear: left;
}

结果 Imgur，我给图片标签加上了 clear: left，但图片仍在红色背景块的右侧，难道不应该位于黑色背景块和第三个 p 标签之间么？请各位前端前辈指教，谢谢。

kamal

2016-03-18 00:30:18 +08:00

1 ，你是对的，截图中演示部分的代码跟上面提到的不一样，没有 h3 标签，粗体字也没有加上 clear:left;
加上后就跟你描述的一样了。
2 ，图片是 inline 元素，但是表现的像是 inline-block 元素
http://stackoverflow.com/questions/2402761/is-img-element-block-level-or-inline-level
http://stackoverflow.com/questions/9928211/why-does-image-use-display-inline-but-behaves-like-an-inline-block-element

ps: 贴代码可以用 jsbin.com ，或者 jsfiddle.net 。可以直接看源码看效果。