display：block与div的区别？
0
悬赏园豆：30
[已解决问题]
解决于 2015-03-12 21:51
前端新手求教！
首先看下我的代码：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的相册</title>
<style type="text/css">
body {
font-family: "Helvetica","Arial",sans-serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color:#333;
background-color: transparent;
}
a {
color:#c60;
background-color: transparent;
font-weight: bold;
text-decoration:none;
}
li {
float: left;
padding: 1em;
list-style: none;
}
img {
clear:both;
display: block;
}
</style>
</head>
<body>
<h1>我的相册</h1>
<ul>
<li>
<a href="images/pig.png" title="I'm pig!" onclick="showPic(this);return false;">Pig</a>
</li>
<li>
<a href="images/rabit.png" title="I'm rabit!" onclick="showPic(this);return false;">Rabit</a>
</li>
<li>
<a href="images/house.png" title="I'm house!" onclick="showPic(this);return false;">house</a>
</li>
<li>
<a href="images/monkey.png" title="I'm monkey!" onclick="showPic(this);return false;">monkey</a>
</li>
</ul>
<img id="placeHolder" alt="image" src="images/pig.png"/>
<p id="description">Choose an image.</p>
<script type="text/javascript">
function showPic(whichPic){
var source = whichPic.getAttribute("href");
var placeHolder = document.getElementById("placeHolder");
placeHolder.setAttribute("src",source);
var text = whichPic.getAttribute("title");
var description = document.getElementById("description");
console.log(description);
description.firstChild.nodeValue = text;
}
</script>
</body>
</html>
主要目的是让img另起一行，但是由于我对li使用了float。
因此img需要添加样式：
clear:both清除浮动
display:block 转换成块级元素
问题来了，既然是转换成块级元素，img才能另起一行。
那么我用div把img包起来，也是相当于一个新的块级元素。
但是却没有达到换行的效果？为什么？
【div包起来】的这种块级元素，和img【使用display:block转换成的块级元素】有什么不同？
最佳答案
0
原来div可以达到效果的，只是我在用div包起来的时候，没有对div使用clear:both，因此div仍然有float的效果。
其他回答(1)
1
大家都是块， 有什么不同的呢。 div默认就是块
收获园豆：30
