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

例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. JavaEE互联网轻量级框架整合开发（书籍）阅读笔记（11）：XML和Annotation装配Bean的混合使用（@ImportResource）

    一.XML和Annotation装配Bean如何合理使用 引入第三方资源包中类的时候,建议使用XML配置,而使用自己编写的Java类的时候,推荐使用Annotation注解配置Bean. 二.关于注解 ...

  2. 所有中心对称五字母域名生成，扫了一下，com的基本上都被注册了。。。

    public static void main(String[] args) { String[] letter = new String[]{"i","m", ...

  3. [LeetCode 题解]: UniquePaths

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  4. Spring Boot - 记录日志

    比自己写文本日志的好处 默认定义好了一些日志级别,会记录当前使用的级别以上的日志,通常线上环境设置的级别较高记得较少 有一些自动split之类的功能 Commons-logging 日志级别:TRAC ...

  5. Oracle 下载安装教程（doc文件）

    之前一直没有怎么接触Oracle数据库,最近公司有个项目中需要用到,所以开始折腾Oracle.刚开始走了很多弯路,为了帮助更多和我一样刚开始接触Oracle的小白,我理了一下的思路 下载地址(需要登录 ...

  6. 2019建模美赛B题（派送无人机）M奖论文

    昨天上午出了建模美赛的结果,我们小组获得的是M奖,感觉挺开心的.我一直觉得拿O奖那种是个概率事件,需要天时地利人和的各种因素都合适才行,所以看到自己是M奖,感觉自己的能力已经得到了认可就很满意了.今天 ...

  7. Archlinux 下系统如何设置让 Wine 调用 ibus输入法

    前言: 如果你是fcitx输入法用户,那么这篇文章大可不必看.fcitx是一个非常强大的框架,著名搜狗输入法就是基于fcitx输入法架构开发的.据我所知.您遇到这个问题可以通过卸载ibus输入法进行修 ...

  8. 一款不错的jQuery分页插件--pagination

    一.前言: 分页功能在项目中时常用到,一款可以快速实现分页功能的插件非常有必要,pagination--这款插件功能非常完美,几乎我所有项目中使用到分页的地方都会第一时间考虑到这个插件,但是其实有能力 ...

  9. UITouch笔记

    UITouch是什么 表示在在屏幕上触摸事件,包括触摸的位置.大小.力度(3D touch).运动. 在一系列触摸事件中,UITouch都是同一个,但是不要retain某一个UITouch.如果要保存 ...

  10. Linux的vim和vi编辑器

    vim和vi的基本介绍 所有的Linux 系统都会内建vi 文本编辑器. Vim 具有程序编辑的能力,可以看做是Vi的增强版本,可以主动的以字体颜色辨别语法的正确性,方便程序设计. 代码补完.编译及错 ...