设置float属性后，是不是就转换为了块状元素？可以设置宽度高度了呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0}
.menu{ background-color:#ccc;width:80px;font-size:20px;letter-spacing:10px;text-decoration:none;margin-left:5px;margin-top:5px;color:red;text-align:center;float:left;}
ul{list-style:none;margin-left:50px;text-indent:10px;}
a.menu:hover{background-color:orange;color:blue;}
</style>
</head>

<body>
<ul>
	<li><a class="menu" href="http://www.siteslife.com" target="_blank">首页</a></li>
    <li><a class="menu" href="http://www.siteslife.com"target="_blank">学习</a></li>
    <li><a class="menu" href="http://www.siteslife.com"target="_blank">游戏</a></li>
    <li><a class="menu" href="http://www.siteslife.com"target="_blank">休闲</a></li>
    <li><a class="menu" href="http://www.siteslife.com"target="_blank">娱乐</a></li>
    <li><a class="menu" href="http://www.siteslife.com"target="_blank">其他</a></li>
</ul>

</body>
</html>

qq_堕落的撒旦_0

2016-10-08

源自：导航条菜单的制作 2-1

关注问题我要回答

2863

操作

收起

3 回答

慕粉2035072466 回答被采纳 +3 积分
2016-10-22

你说的没错，设置float：left，float：right，position：Absolute 后会使元素变为块状元素

0 回复有任何疑惑可以回复我~

收起回答

qq_堕落的撒旦_0 提问者

恩恩，好的吧，谢谢了！

2016-10-23 回复有任何疑惑可以回复我~

人非草木

应该是变成行内块状元素吧

2016-11-29 回复有任何疑惑可以回复我~

折翼天使I
2016-10-19

float：是设置为浮动；
display：block；才是设置为块状元素；
块状元素就具备盒子模型特征，可是margin，padding等属性；

0 回复有任何疑惑可以回复我~

收起回答

qq_堕落的撒旦_0 提问者

可是我设置浮动后，就可以设置margin、还有height等属性了···

2016-10-20 回复有任何疑惑可以回复我~

RJason 回复 qq_堕落的撒旦_0 提问者

我之前也发现这个问题，因为我在设置inline-block元素浮动以后，它的表现就像块元素一样了。还有inline元素也是一样。inline-block浮动以后最明显的变化是4px边距消失了，而inline元素则是能像块元素一样设置宽高margin,padding的上下值了。我还特意做了一个小demo试验了一下，确实是这样的，但是我只在chrome下做了测试，浮动以后，替换元素和内联元素在计算值上面显示的是block。不知道W3C里面有没有定义关于这个问题的规范

2016-11-29 回复有任何疑惑可以回复我~

qq_堕落的撒旦_0 提问者回复 RJason

没找到···

2017-01-09 回复有任何疑惑可以回复我~

查看1条回复

qq_堕落的撒旦_0 提问者
2016-10-08

.menu{ background-color:#ccc;width:80px;font-size:20px;letter-spacing:10px;text-decoration:none;margin-left:5px;margin-top:5px;color:red;text-align:center;float:left;}

主要就是这句。

1 回复有任何疑惑可以回复我~

收起回答