在了解浮动属性之前，首先我们先了解一下html中关于display属性的相关知识。

display属性常用的有inline, block, inline-block.

inline也就是内联的意思。 常见的html标签中如 span, font, a, b, em 都是内联元素。

所谓内联，简单理解就是不会换行的元素。

<body>

  <b>bold element</b>

  <a href="http://www.google.com">google</a>

  <font color='red'>red font</font>

  <span style="height: 230px;width:100px;">span</span>

</body>

结果如下：

这个例子很简单，也说明了inline属性的特点，即不会换行。 页面上4个元素的文本都是连在一起的。

这里需要注意一点。 inline元素是不支持宽、高属性的。 如例子中的span元素设置了宽和高，但是没有起作用。

block是“块”的意思。 block元素与inline元素相反，它会自动换行。 常见的html标签中如 div, form, ul, li, p, h1都是块元素。

<body>

  <form name="testForm" action="">

    <input type="text" name="demo"/>

  </form>

  <div>

      div content

  </div>

  <h1>h1</h1>

  <p>p</p>

  <ul>

    <li>123</li>

    <li>123</li>

    <li>123</li>

  </ul>

  <span>span!</span>

  <span>span!</span>

</body>

结果如下：

图中很明显的看见，这个块元素都默认换行了。

inline-block本文不讨论。

那么有什么方法可以让block元素变成内敛元素呢。

肯定有是的，有两种方法。

第一种就是通过css改变块元素的display属性, 改成inline即可。

<body>

  <div style="width: 40px; height: 40px; background-color: red;margin-right: 10px;display:inline;">

      div1

  </div>

  <div style="width: 40px; height: 40px; background-color: red;margin-right: 10px;display:inline;">

      div2

  </div>

  <div style="width: 40px; height: 40px; background-color: red;margin-right: 10px;display:inline;">

      div3

  </div>

</body>

但是由于inline属性会忽略宽和高，因此这种方法在实际运用场合上上基本不会用的。 直接忽略！

第二种就是本文要讨论的浮动属性了。

<body>

  <div style="width: 40px; height: 40px; background-color: red;margin-right: 10px;float: left">

      div1

  </div>

  <div style="width: 40px; height: 40px; background-color: red;margin-right: 10px;float: left">

      div2

  </div>

  <div style="width: 40px; height: 40px; background-color: red;margin-right: 10px;float: left">

      div3

  </div>

</body

我们可以看w3c上对浮动的说明。   点击查看->

具体的例子这篇文章已经很详细了。

我们看 开头的一句话：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

说的很明确， 浮动的框会直到它的外边缘碰到“包含框”或“另一个浮动框的边框“为止。

我们分析一下w3c的第一个例子：

框1右浮，并且它的边缘碰到了包含宽的边框，因此停留在了如图所在的位置。

再看第二个例子：

左图框1左浮，也碰到了包含框的边框。 由于浮动的元素脱离的文档流，不占据空间，所以接下来框2会无视掉框1，但是由于浮动元素优先级较高，因此框2在框1的下面，被遮住了。框3由于没有浮动，是block元素， 因此自动换行，在框2的下方。

这2个例子说明2个原理。

　　一， 浮动的元素脱离文档元素， 不占据空间。 不浮动的元素会直接无视掉这个元素。

　　二，浮动元素浮动的依据跟包含框和附近另外1个浮动的框，碰到了就会停止下来。

这里有一个注意点：

我们先看浮动框定义的第二句话的后半句  （所以文档的普通流中的块框表现得就像浮动框不存在一样）

请注意，普通流中的 "块框" 表现得就像浮动框不存在一样。 这里指的是块框， 而不是内联元素。

比如以下例子：

#container {

    background-color: red;

    padding: 10px;

    height: 200px;

    width: 200px;

}

.left {

    float: left;

    width: 50px;

    height: 50px;

}

.right {

    float: right;

    width: 60px;

    height: 60px;

}

.green {

    background-color: green;

}

.blue {

    background-color: blue;

}
<body>

    <div id="container">

        <div class="left blue"></div>

        <div class="right blue"></div>

        <span>This is inline element</span>

    </div>

</body>

结果如下：

我们可以看到。 span这个内联元素不会忽略两个浮动元素的。

我们将以上代码的span元素替换成div块框元素。

修改后的html代码如下：

<body>

    <div id="container">

        <div class="left blue"></div>

        <div class="right blue"></div>

        <div style="width: 50px; height: 60px;" class="green"></div>

    </div>

</body>

结果：

很明显地看到，这个绿色的块框元素忽略的浮动元素。

但是如果我们将html代码改成如下：

<body>

    <div id="container">

        <div style="width: 50px; height: 60px;" class="green"></div>

        <div class="left blue"></div>

        <div class="right blue"></div>

    </div>

</body>

结果却是这样:

从结果可以很明显地看出， 块框元素在container容器中占据了第高度为60像素的那块区域。 两个浮动的元素都是在这块框区域下开始渲染的。

这样是不是违背了w3c的定义：浮动框会无视普通流中的块框。

根据个人的理解：

　　这可能是由于html的渲染顺序导致的。html代码中先写了块框， 导致先渲染了这个块框的区域。

　　之后渲染两个浮动框， 渲染浮动框的时候发现上面已经被块框渲染过了。 于是从块框之后开始渲染。

我们在上个例子中container容器中最后1个div后再加1个div

<div style="width: 50px; height: 60px;" class="green"></div>

在渲染最后1个div的时候。此时发现已经有两个浮动框， 这时候就会忽略这2个浮动框，从第一个块框开始继续渲染，也就跑到了第一个块框之后的位置。

所在在w3c定义浮动的那句话有点小问题。

第二句话的后半句应该改成：

　　所以文档的普通流中的块框在浮动框渲染之后会表现得就像浮动框不存在一样。

综上所述，感觉浮动框并没有脱离文档流。

不知道个人的理解是否正确， 文中难免有一些错误， 希望读者发现并指出。

关于css浮动框是否脱离文档流的分析的更多相关文章

  1. CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

    1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  2. html/css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

  3. 4、前端--浮动、定位、是否脱离文档流、溢出属性、z-index、透明度、JavaScript简介

    浮动 # ps:html代码时没有缩进一说的 全部写在一行也可以 """浮动主要就是用于页面布局的!!!""" # 浮动带来的负面影响 &q ...

  4. float之脱离文档流

    所谓的文档流:指的是元素在排版过程中,元素自动从左到右,从上到下的顺序排列. 脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位 只有绝对定位 ...

  5. CSS脱离文档流&浮动

    什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...

  6. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

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

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

  8. css脱离文档流

    作者:张秋怡链接:http://www.zhihu.com/question/24529373/answer/29135021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

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

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

随机推荐

  1. Cookie客户端缓存.Session.Application

    Cookie客户端缓存. 1.引言 随着浏览器的处理能力不断增强,越来越多的网站开始考虑将数据存储在「客户端」,那么久不得不谈本地存储了. 本地存储的好处: 一是避免取回数据前页面一片空白,如果不需要 ...

  2. Android移动客户端性能测试浅谈——电量

    本文由作者张迎贞授权网易云社区发布. APP性能测试除了需要监控PCU.内存占用.流量等,还需要获取APP的电量数据,测试在可接受范围内,避免APP出现过度消耗电量的现象.手机有很多硬件模块:CPU, ...

  3. HBase – 存储文件HFile结构解析

    本文由  网易云发布. 作者:范欣欣 本篇文章仅限内部分享,如需转载,请联系网易获取授权. HFile是HBase存储数据的文件组织形式,参考BigTable的SSTable和Hadoop的TFile ...

  4. RabbitMq初探——消息分发

    消息分发 前言 我们在用到消息队列的场景,一般是处理逻辑复杂,耗时,所以将同步改为异步处理,接入队列,下游处理耗时任务. 队列消息数量很大,且下游worker进程(消费者)处理耗时长,所以就有了任务的 ...

  5. DOS目录相关命令

    MD----创建自目录命令   格式:MD[盘符:][路径名]<子目录名> 1)在C盘的根目录下创建名为FOX的子目录  C:\>MD FOX 2)在FOX子目录下创建USER子目录 ...

  6. IDEA中配置SpringMVC框架 第一个演示【转】

    环境: intellij IDEA 2017 CI JDK 1.8 tomcat 8.5.23 具体步骤 1.新建项目 勾选Spring MVC .Web Application(勾选了Spring ...

  7. centos7安装nginx(自定义安装文件夹)

    一.安装所需要的依赖软件 1.gcc:nginx编译依赖gcc环境 #yum install gcc-c++ 2.pcre:(Perl Compatible Regular Expressions)是 ...

  8. ElasticSearch基本查询

    词条查询 这是一个简单查询.它仅 匹配给定字段中包含该词条的稳定,且是2未经分析的确切的词条. { “query” :{ “term”:{ “title”:”crime” } } } 多词条查询 匹配 ...

  9. [CSS3] 动画暗角按钮

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Git从码云或者Github 克隆代码到本地

    Git从码云或者Github 克隆代码到本地 1.下载安装Git,傻瓜式下一步下一步即可... 2.配置Git: 2.1.选择你要clone到本地的路径:右键--->$ Git Bash Her ...