所谓文档流，指元素在排版布局的过程中，元素会自动从左到右，从上到下的流式排列。脱离文档流呢，就是元素打乱了这个排列，或是从排版中拿走。

说到文档流呢，我们先来说一下元素，每个元素呢，都有display属性。

行内元素本身是display：inline属性例如:a b span img input select strong 。不会自动换行，例如我们插入几个图片标签，它们就会紧密相连，图片因为大小会高矮不切，一行排不下会自动换行。

块级元素本身是display：block属性例如：div ol li dl dt dd h1-h6 p。块级元素会独占一行，在不做操作的时候，不管大小，在它后面不会相连，就是霸气。（块级元素和行级元素可以设置相应的display属性来转换）如下图。

还有个特殊的就是display：inline-block。这样元素就具有行内元素和块级元素的共同特征。

当前所知，脱离文档流的方式有两种：浮动和定位。

浮动（float），在css中任何的元素都可以浮动，Float常跟属性值left、right、none，Float:none 不使用浮动，Float:left 靠左浮动，Float:right 靠右浮动，当左右浮动时，这个元素就会脱离文档流。

例如这样我让第二个第四个左浮动，2脱离了原来的位置跑到了1的下面，4跑到了5的上面，说明他们脱离了文档流，不过他们还是需要显示出来，1，3，5按正常文档流排列，不过2占了3紧挨着1的地方，3被迫挤了下来。

如果我们把他们都浮动在一边，他们就会并排显示出来，但是有一点就是，你需要给他留有浮动的空间，这个在平常布局的时候很容易出现，如果某一行的空间不够，那么这块就会往在滑，直至找到空间。如图说明

       <style type="text/css">

            #big-box{ width: 500px; height: 800px; border:1px solid #8a2be2; }

            #a1 { width: 100px;  height: 100px; background: aqua; }

            #a2 {width: 200px; height: 200px; background:yellow; }

            #a3 {width: 100px; height: 100px; background:red; }

            #a4 {width:50px; height: 50px; background:pink;}

            #a5 {width: 300px; height: 300px; background:peru; }

            #big-box > * {float: left;}

        </style>

    </head>

    <body>

        <div id="big-box">

            <div id="a1">1</div>

            <div id="a2">2</div>

            <div id="a3">3</div>

            <div id="a4">4</div>

            <div id="a5">5</div>

        </div>

    </body>

这是最后一个代码，在5不div不断变大，他浮动的位置也不断的改变，这就是因为5的空间不够，他会不断的找到他位置。可以看到相互元素之间没有空隙，这个特征很好用来排列。

css布局与文档流的关系之float（浮动）的更多相关文章

  1. 前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  2. 脱离文档流两操作，float和position:absolute的区别

    文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...

  3. 认识CSS中布局之文档流、浮动、定位以及叠放次序

    前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...

  4. 前端基础-CSS如何布局以及文档流

    一. 网页布局方式 二. 标准流 三. 浮动流 四. 定位流 一. 网页布局方式 1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad ...

  5. CSS中"position:relative"属性与文档流的关系

    前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...

  6. CSS的布局之文档流，与行内/块级元素的延伸

    文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> ...

  7. 浅谈，html\css脱离标准文档流相关

    (个人知识有限,难免有误,请见谅) 标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行. 本来在标准文档流下,各个元素相 ...

  8. html/css 关于脱离文档流的几种情况

    所谓的文档流 顾名思义就是按照顺序流下来,指的是html元素从上往下 从左往右的流式排列, 比如说写了5个Div,正常的文档流是依次显示这5个div块: 脱离文档流就是指它所显示的位置和文档代码就不一 ...

  9. CSS中脱离文档流是什么意思?

    如果一个元素脱离文档流了,是不是只是显示上脱离而已?在html中是否也会脱离?我用js取这个元素的父节点的childNodes还能否取到这个元素:同时,这个元素的parentNode还是不是html中 ...

随机推荐

  1. HDU2476 String painter——区间DP

    题意:要把a串变成b串,每操作一次,可以使a串的[l,r]区间变为相同的一个字符.问把a变成b最少操作几次. 这题写法明显是区间dp ,关键是处理的方法. dp[l][r]表示b串的l~r区段至少需要 ...

  2. FastAdmin笔记~

    在phpstud命令行输入以下命令! 1.在命令行一键生成test表格的crud php think crud -t  test 2.在数据库创建表必须加上表注释 3.生成test控制器的权限菜单 p ...

  3. Hadoop-3.0.2 覆盖源代码生效

    一.需求背景 基于业务需求,需要修改hadoop源码,将局部源代码修改后,放在自己的工程目录下,由于其相同的路径,想要覆盖掉源码对应部分 二.环境背景 IDEA下,编辑MapReduce任务,打包提交 ...

  4. Ubuntu 14 如何解压 .zip、.rar 文件

    .zip 和 .rar 是Windows下常用的压缩文件,在Ubuntu中如何解压. [解压.zip文件] Ubuntu中貌似已经安装了unzip软件,解压命令如下: unzip ./FileName ...

  5. java jdk动态代理学习记录

    转载自: https://www.jianshu.com/p/3616c70cb37b JDK自带的动态代理主要是指,实现了InvocationHandler接口的类,会继承一个invoke方法,通过 ...

  6. [数据结构]P2.1 二叉搜索树

    二叉树就是每个节点最多有两个分叉的树.这里我们写一写一个典型的例子二叉搜索树,它存在的实际意义是什么呢? 在P1.1链表中,我们清楚了链表的优势是善于删除添加节点,但是其取值很慢:数组的优势是善于取值 ...

  7. Web版记账本开发记录（五）

    今天是第五天,不过今天有点事什么都没做,只是看了看一些教学视频, 今天家里有事, 还没来得及实践,等明天再实践,然后再完善完善.

  8. 获取ip地址&&测试ip地址

    # request# 动态页面加载 Selenium# request# 响应类型为 json# import json # json.loads(str) # 将str转化为dict# json.d ...

  9. springcloud-Ribbon-负载均衡组件

    Ribbon负载均衡 1.Ribbon简介 ribbin是Netflix发布的负载均衡器,有助于控制http和tcp客户端的行为,为ribbon配置服务提供者列表后,ribbon就可以基于某种负载均衡 ...

  10. 如何 distinct 只对一个字段有用，同时查出其他字段

    转至:http://blog.csdn.net/u013402772/article/details/51262524 在使用MySQL时,有时需要查询出某个字段不重复的记录,虽然mysql提供 有d ...