所谓的文档流：指的是元素在排版过程中，元素自动从左到右，从上到下的顺序排列。

脱离文档流：也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位

只有绝对定位absolute和浮动float才会脱离文档流。

使用float脱离文档流时，其他盒子会无视这个元素（完全无视），但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。

(1)使用float实现文本环绕效果（文字部分无视，此时浮动元素虽然脱离文档流，但任然占据空间）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    .text{

        width:100px;

        height:100px;

        background-color: blue;

        float:left;

    }

    </style>

</head>

<body>

    <div class="pre">

        <span class="text"></span>

        文字文字文字文字文字文字文字文字文字

    </div>

</body>

</html>

（2） 盒子元素完全无视浮动元素

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.text{

width:100px;

height:100px;

background-color: blue;

float:left;

}

.bro{

width:200px;

height:200px;

background-color: red;

}

</style>

</head>

<body>

<div class="pre">

<span class="text"></span>

</div>

<div class="bro">

</div>

</body>

</html>

（3） 盒子中的文字部分无视，但盒子本省完全无视

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.text{

width:200px;

height:200px;

background-color: blue;

float:left;

}

.bro{

width:300px;

height:300px;

background-color: red;

}

</style>

</head>

<body>

<div class="pre">

<span class="text"></span>

</div>

<div class="bro">

文字部

</div>

</body>

</html>

而对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)

float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！

　　常用清除float副作用 ：在父元素中的所有子元素的最后添加带有clear：both；属性的元素可以清楚浮动，使得父元素具有高度。

<div style="clear:both;"></div>

　　　　注意：对盒子里的元素使用float属性时注意父元素的宽度设置，高度可以设为auto。

float之脱离文档流的更多相关文章

  1. float,absolute脱离文档流的总结

    dom元素脱离文档流,有如下几种方式: 1. float 脱离文档流,其他dom元素无视他,在其下方布局,但是其未脱离文本流,其他元素的文本会认为他存在,环绕他布局.父元素会无视他,因此无法获取其高度 ...

  2. float的元素脱离文档流，但不完全脱离，只是提升了半层；

    float的元素脱离文档流,但不完全脱离,只是提升了半层:

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

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

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

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

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

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

  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. css脱离文档流

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

  8. 一天搞定CSS： 浮动（float）及文档流--10

    浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...

  9. CSS脱离文档流&浮动

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

随机推荐

  1. equal与== 个人笔记

    首先看看下面的图,看清楚了图咱们要说的知识点也就说说清楚了一半 int a=10; String b="ss"; String c=new String("kkk&quo ...

  2. Linux内核通用队列的使用笔记(读linux内核设计与实现)

    Linux内核通用队列实现 Kfifo位置:kernel/kififo.c 使用需要包含头文件#include <kernel/kififo> 1.创建队列(动态创建)int kfifo_ ...

  3. Gradle 1.12用户指南翻译——第二十七章. Ear 插件

    其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Github上的地址: https://g ...

  4. 【LaTeX排版】LaTeX使用--入门基础<一>

    经过两个多星期,毕业论文终于写完了.由于自己对Word软件并不是很熟悉,再加上在数模时见识过LaTex的强大之处,于是就决定用LaTex进行论文的排版.使用LaTex可以避免像Word那样换台机器而出 ...

  5. MTK如何烧录IMEI码（俗称串号）

    先介绍一下使用环境 主控:MT6582VX android版本:4.4.2 操作系统:windows XP SN烧录工具:SN_Write_tool_exe_v2.1420.00 首先介绍一下IMEI ...

  6. bash下如何使用bind[En]

    You can determine the character sequence emitted by a key by pressing Ctrl-v at the command line, th ...

  7. Android绘图机制（四）——使用HelloCharts开源框架搭建一系列炫酷图表，柱形图，折线图，饼状图和动画特效，抽丝剥茧带你认识图表之美

    Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...

  8. android离线缓存技术

    离线缓存是指在有网络的状态下将从服务器获取的网络数据,如Json 数据缓存到本地,在断网的状态下启动APP时读取本地缓存数据显示在界面上,常用的APP(网易新闻.知乎等等)都是支持离线缓存的,这样带来 ...

  9. PS 色调——颜色运算

    通过对三个通道定义不同的运算,使图像的色调改变,进而生成不同色彩的图像. clc; clear all; Image=imread('4.jpg'); Image=double(Image); R=I ...

  10. HBase行锁

    1 行锁简介 在事务特性方面,hbase只支持单row的事务,不能保证跨row(cross-row)的事务.hbase通过行锁来实现单row事务.客户端进行操作时,可以显式对某一个行加锁,但是大部分情 ...