首页 > 代码库 > inline元素、inline-block元素在float、position:fixed、position:absolute之后出现的问题
inline元素、inline-block元素在float、position:fixed、position:absolute之后出现的问题
我们知道内联元素是不能设置宽、高的，但是一旦使其脱离了文档流，就可以了，这是因为它已经变成了块级元素。
例1：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>floattest</title> <style> div.wrap { width: 500px; height: 300px; margin: 100px auto 0 auto; background-color: #ccc; } a { border:thin solid blue; float: left; width: 200px; height: 100px; } </style></head><body> <div class="wrap"> <a>这是一段文字</a><a>这是另外一段文字</a> </div></body></html> 
可以发现这是a已经成了块级元素，可是块级元素为什么还会处在一行之中呢？ 因为脱离文档流了啊，当然不会遵循文档流中的规范了。
例2：
在上面的例子的基础上添加display:inline-block;可以发现：即使我们已经把其display强行设置为了inline-block，但是只要浮动，其display属性又会变成block。
上面的两个例子，我们使用float:right; position:fixed; position:absolute; 都会得到同样的结论。
inline元素、inline-block元素在float、position:fixed、position:absolute之后出现的问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。