我们知道内联元素是不能设置宽、高的，但是一旦使其脱离了文档流，就可以了，这是因为它已经变成了块级元素。

例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之后出现的问题的更多相关文章

  1. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  2. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  3. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

  4. inline元素、block元素

    inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...

  5. 关于block元素和inline元素

    呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...

  6. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  7. 【总结】我所整理的float, inline-block还有position:absolute

    这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu ...

  8. 通过定位position="fixed"实现网页内容的固定层效果

    在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...

  9. 解决IE6下固定定位问题 使用position:fixed

    IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法. 如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩 ...

随机推荐

  1. JavaScript语言精粹 笔记05 正则表达式

    正则表达式 正则表达式以方法的形式被用于对字符串中的信息进行查找.替换画图提取操作.可处理正则表达式的方法有:regexp.exec, regexp.test,string.match, string ...

  2. （转载）get和 post方法的不同

    HTTP的Get/Post请求区别归纳 1. get是从服务器上获取数据,post是向服务器传送数据.g et 和 post只是一种传递数据的方式,get也可以把数据传到服务器,他们的本质都是发送请求 ...

  3. ArcGIS 桌面远程连接带有端口号的SDE

    首先配置远程连接 PostgreSQL数据库远程连接功能的开启   需要修改连个配置文件,默认位于 安装目录的data子文件夹下.   1.postgresql.conf 修改成监听所有ip地址的连接 ...

  4. 解决安装VC6.0后出现MSDEV.EXE错误，无法用打开工程解决方法

    问题:安装VC6.0后,在打开项目或添加文件时,出现如下错误: 可能导致原因:由于Ms安装软件的兼容性问题,导致VC6.0安装不完全, 解决方法:--网上打sp6补丁的方法貌似不可用,所以可以采用另一 ...

  5. ARIA(Accessible Rich Internet Application)

    ARIA 为Web app提供满足用户不同需求的解决方案.建设起用户和软件之间的桥梁. 新的HTML5标准中增加 aria-* 的标签属性,全称Accessible Rich Internet App ...

  6. RobotFramework关键字返回参数

    业务关键字[登录]返回参数 调用时直接把return的参数值写在业务关键字的最前面,就可以使用关键字的返回值了

  7. orcal exists

    Oracle使用了一个复杂的自平衡B-tree结构.通常,通过索引查询数据比全表扫描要快.当 Oracle找出执行查询和Update语句的最好路径时,Oracle优化器将使用索引.同样在联结多个表时使 ...

  8. CXF动态调用wsdl接口

    1.application.properties文件中配置接口url 2.工具类 package com.vulnverify.core.utils; import java.io.IOExcepti ...

  9. APIO2012 派遣dispatching | 左偏树

    题目链接:戳我 就是尽可能地选取排名小的,加起来就可以了.然后我们考虑利用一个大根堆,一个一个合并,如果超过派遣的钱,我们就把费用最大的那个忍者丢出队列. 左偏树,作为一个十分优秀的可并堆,我们这道题 ...

  10. SpringMVC 的使用映射路径展示文件服务器上的图片

    需求: 前端上传图片,返回路径给前端,前端通过路径来访问图片的资源. 解决方案: <mvc:resources mapping="/${mapping_path}/**" l ...