float 浮动 文档流和文字流区别

源自:2-2 浮动的基础知识

关于float属性的脱离文档流的问题

看完视频后,教材里说的使用float浮动后,元素虽然会脱离文档流,但还处在文本流的位置当中,所以就不会出现重叠的效果吗?

下面我自己试了一下,给两个DIV分别设置了样式,而只给第一个DIV设置了float浮动属性,然而效果显示,第一个DIV覆盖了第二个DIV,出现了重叠效果,请问这是什么原理?

提问者:小小之植物06-01

1个回答

妮可妮可妮_

06-01

已采纳

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

float只是脱离了文档流的dom空间但是还占据着文字空间.使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置

21

原文地址:https://www.cnblogs.com/JankinLiu/p/9400363.html

时间: 2024-11-07 00:22:14

float 浮动 文档流和文字流区别的相关文章

如何在PDF格式文档中添加文字超链接!

有时候我们在整理PDF格式文件的时候喜欢在PDF文件的内容中给文字添加超链接,但是因为PDF文件比较特殊,所以很多朋友都不知道怎么添加超链接,接下来小编就为大家介绍一下如何在PDF文件中添加文字超链接! 1.百度搜索"迅捷PDF编辑器",下载安装好迅捷PDF软件. 2.运行软件,选择菜单栏的"文件-打开",然后浏览您需要编辑的PDF文档打开. 3.将鼠标移至需要修改的位置之后点击"编辑内容",然会会出现一个蓝色框框,我们就可以在蓝框中开始将原来的

文档注释与多行注释的区别

多行注释与文档注释的区别: 多行注释的内容不能用于生成一个开发者文档, 而文档注释 的内容可以生产一个开发者文档. 使用javadoc开发工具即可生成一个开发者文档. javadoc工具的使用格式: javadoc -d 存放文档的路径 java的源文件 使用javadoc工具要注意细节: 1. 如果一个类需要使用javadoc工具生成一个软件的开发者文档,那么该类必须使用public修饰. 2. 文档注释注释的内容一般都是位于类或者方法的上面的. 写注释的规范:一般单行注释是位于代码的右侧,多

float脱离文档流,清除浮动

1 <style type="text/css"> 2 .main{width: 400px; margin: 0 auto; background-color: blue;} 3 .left,.right {float: left; width: 180px; height: 500px;} 4 .left{background-color: green;} 5 .right {background-color: silver;} 6 </style> 7 8

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流?

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视

float/文档流/清除浮动

1.float:left|right|none|inherit 2.文档流是万张中显示排列时候所占的位置 3.浮动的定义:使元素脱离文档流.按照指定方向移动,遇到父级边界或者相邻的浮动元素停下来 4.clear:left|right|none|inherit;元素的某个方向上不能有浮动元素 cear:both:在左右两侧均不允许浮动元素 清楚浮动的方法: <head> <meta charset="UTF-8"> <title>Document<

Css问题 margin float 文档流 背景图底部充满

今天来整理一下做网页遇到的问题吧 1.插入背景图片并使图片居于div底部充满整个行. <style> background:url(xxx.jpg) no-repeat; background-position:bottom; background-size:100%; </style> 属性: background-position:背景位置属性用于设置背景图像的位置,这个属性只能应用于块级元素和替换元素.其中替换元素包括img.input.textarea.select. 语法

HTML 文档流和文本流的理解

文本流,概括地说其实就是一系列字符,是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而position属性可以将元素从文本流脱离出来显示. 文档流,英文原版文档为"normal flow",翻译成常规流.普通流也就更好理解它了. 从直观上理解,常规流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下(块级元素),一行接一行,每一行从左至右(行内元素). 定位类型包括三种: 常规

css脱离文档流

Q:什么是文档流? A:简单的说可以理解为元素在页面上出现的先后顺序. Q:什么情况下会脱离文档流? A:当使用“浮动”与“绝对定位”时. Q:脱离文档流就不占据空间了吗? A:可以这么说.更准确地一点说,是一个元素脱离文档流之后,其他的元素在定位的时候会当做没看见它,两者位置重叠都是可以的. Q: 脱离文档流是不是指该元素从dom树中脱离? A: 不是,用浏览器的审查元素就可以看到脱离文档流的元素(例如被float了)依然会出现在dom树里. 需要注意的是,使用float脱离文档流时,其他盒子

脱离文档流的方法

HTML脱离文档流的三种方法 1:float 使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在该元素的周围. 2:absolute 3:fixed 相对于浏览器窗口进行定位.(相对于浏览器窗口就是相对于html). [半脱离文档流]: position:relative 本体还在文档流中占有位置,但是却可以通过改变位置使其漂浮到其他的地方,其定位方式是相对其原先在文档流中的位置进行定位的. 原文地址:https://www.cnblogs.c