文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行，内联元素不独占一行；

CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

float时：

<html>

    <head>

        <title></title>

        <style type="text/css">

            *{padding: 0;margin: 0}

            .box1{background-color:red;float:left；width:100px;}

            .box2{background-color:gray;float:right；width:100px;}

            .box3{background-color: aqua;margin: 0 110;}

        </style>

    </head>

    <body>

        <div class="box1">box1</div>

        <div class="box2">box2</div>

        <div class="box3">box3</div>

    </body>

</html>

显示效果如下：可见，box3的margin是box3边框到浏览器的距离，box2的位置并没有收到float的box1 box2的影响。

当把box3样式改为：.box3{background-color: aqua;}时，可以看到box3中间的文本依然为box1 box2让出了位置。

position:absolute时：

<html>

	<head>

		<title></title>

		<style type="text/css">

			*{padding: 0;margin: 0}

			.box1{width:100px;background-color:red;position:absolute;left:0;top:0}

			.box2{width:100px;background-color:gray;position:absolute;right:0;top:0}

			.box3{background-color: aqua;}

		</style>

	</head>

	<body>

		<div class="box1">box1</div>

		<div class="box2">box2</div>

		<div class="box3">box3</div>

	</body>

</html>

显示效果：

可以看到，box3中的文本不见了，被box1遮盖了，也可以反映出，box3的定位也是不受到绝对定位的box1 box2的影响，而且box3的文字也没有为box1 box2让出位置。

脱离文档流两操作，float和position:absolute的区别的更多相关文章

  1. float之脱离文档流

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

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

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

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

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

  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中间float clear和布局

    文档流 先说说什么是公文流转  什么流 它是一系列连续的东西 <div style="background-color:pink;width:40px;height:80px;&quo ...

  8. 关于css浮动框是否脱离文档流的分析

    在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...

  9. CSS-position 属性&元素脱离文档流引发父级边框塌陷问题

    CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中 ...

随机推荐

  1. Oracle10g物理DG详细配置方法及步骤

    --测试环境:    OS:Redhat linux(64)    Primary:    IP:192.168.94.198    SID:dgdb1    Hostname:dg1    DB_U ...

  2. linux ubunt 安装软件的前期准备——更新源的更换

    如果是高手,请翻到页面最下方,更换更新源的总结,直接操作即可 可能会优点啰嗦,但是认真看,一定能解决问题~~希望对大家有帮助~ 最近在熟悉linux环境,自己安装了一个ubuntu虚拟机. 很多朋友问 ...

  3. Python基础数据类型之字典

      基础数据类型之字典 ps:数据类型划分:可变数据类型和不可变数据类型. 不可变数据类型:元组(tupe).布尔值(bool).整数型(int).字符串(str).不可变数据类型也称为可哈希. 可变 ...

  4. Python之格式化输出，初始编码以及运算符

    一.题型 1.使用while循环输入 1 2 3 4 5 6  8 9 10 count = 0 while count < 10: count += 1   #count = count + ...

  5. ZOJ-2913 Bus Pass---BFS进阶版

    题目链接: https://vjudge.net/problem/ZOJ-2913 题目大意: 问哪个区域到公交路线上所有区域的最大距离最小 思路: 这里要求出到底是哪个区域到某些指定区域的最大距离最 ...

  6. 【转】python3 urllib.request 网络请求操作

    python3 urllib.request 网络请求操作 基本的网络请求示例 ''' Created on 2014年4月22日 @author: dev.keke@gmail.com ''' im ...

  7. Python3NumPy——数组（1）之创建

    开篇 numpy库作为科学计算的基础库,其地位相当重要,它是对数组操作的基石.它的存在使得线性代数以及矩阵论等相关知识在计算机上的表达更加方便与简单,集中体现出了人想办法,计算机去工作. Python ...

  8. 前端开发必备之chrome插件

    Chrome浏览器目前是网络上可用的最好的浏览器之一,并且自2011年11月超越了Firefox浏览器之后,已经成为了互联网上占主导地位的浏览器. 本篇文章将与大家分享一些与前端开发有关的实用的Chr ...

  9. 前端之旅HTML与CSS篇之自己总结的关于居中的方法

    1.text-align:center  :在父容器里水平居中 inline 文字,或 inline 元素 2.line-height  与 height 相等时,垂直居中文字(文字垂直水平居中,同时 ...

  10. 重拾Python(4):Pandas之DataFrame对象的使用

    Pandas有两大数据结构:Series和DataFrame,之前已对Series对象进行了介绍(链接),本文主要对DataFrame对象的常用用法进行总结梳理. 约定: import pandas ...