这是一个创建于 3172 天前的主题，其中的信息可能已经有所发展或是发生改变。
第一个问题：
在实践 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 标签之间么？
请各位前端前辈指教，谢谢。
 |
1
kamal 2016-03-18 00:30:18 +08:00  1
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 。可以直接看源码看效果。 |
Select Language
