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

所谓文档流,指元素在排版布局的过程中,元素会自动从左到右,从上到下的流式排列.脱离文档流呢,就是元素打乱了这个排列,或是从排版中拿走. 说到文档流呢,我们先来说一下元素,每个元素呢,都有display属性. 行内元素本身是display:inline属性例如:a b span img input select strong .不会自动换行,例如我们插入几个图片标签,它们就会紧密相连,图片因为大小会高矮不切,一行排不下会自动换行. 块级元素本身是display:block属性例如:div ol l…

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

高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局一.文档流 1.什么是文档流将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质文档流本质是 nomal flow (普通流.常规流) 3.BFC(Block Formatting Contxt) 块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干 4.BFC的规则…

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

文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位.需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围.而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它. float时: <html> <…

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

前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流普通流又被称为文档流或者标准流,普通流是指网页内标签元素正常情况下会按照自上而下,自左向右按顺序排列.即块级元素独占一行,多个块级元素存在会自上而下顺序排列,多个行内元素会共占一行,自左向右排列. <!DOCTYPE html> <html> <head> <meta c…

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

一. 网页布局方式二. 标准流三. 浮动流四. 定位流一. 网页布局方式 1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad++等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的 2.网页布局/排版的三种方式 2.1.标准流 2.2.浮动流 2.3.定位流二. 标准流标准流的排版方式,又称为:文档流/普通流,所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列. 1…

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

前言近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:"position:relative"不会导致元素脱离文档流. 博文地址:CSS中"position:relative"属性与文档流的确切关系 "relative"与文档流说到标准,最权威的自然莫过于CSS标准文档.经过一番繁琐的查找之后(w3c网站…

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

文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> <form> <table> <p> ... ·行内元素 <span> <title> <strong> <input> <select> <img> <a> ... 此处延伸文档流中块级…

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

(个人知识有限,难免有误,请见谅) 标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行. 本来在标准文档流下,各个元素相安无事,可突然有一天某个元素心想啊,我那么优秀,不该出现在这里啊,于是它成精了,它发现了一道大门走向另一个空间BFC. BFC:直译为"块级格式化上下文",这是一个独立的区域,这个区域与外部没有关系了,互不招惹,个人常用的会开启BFC空间的方式有 1.float的值不是none 2.pos…

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

所谓的文档流顾名思义就是按照顺序流下来,指的是html元素从上往下从左往右的流式排列, 比如说写了5个Div,正常的文档流是依次显示这5个div块: 脱离文档流就是指它所显示的位置和文档代码就不一定一致了.比如可以用css控制,把最后一个div块显示在第一个div块的地方.当前所知的脱离文档流的方式有两种:浮动和定位. 定位属性positon b. 浮动属性float…

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

如果一个元素脱离文档流了,是不是只是显示上脱离而已?在html中是否也会脱离?我用js取这个元素的父节点的childNodes还能否取到这个元素:同时,这个元素的parentNode还是不是html中的父节点? 脱离文档流只是对html文档的一种解析方案的说法而已.脱离文档流是相对正常文档流而言的.正常文档流就是我们没有用css样式去控制的html文档结构,你写的界面的顺序就是网页展示的顺序.比如写了5个div块.正常文档流就是依次显示这5个div块.从左往右,自上而下的顺序.脱离文档流就是指它…

css 盒模型文档流几种清除浮动的方法

盒模型 1.box-sizing: content-box 是普通的默认的一种盒子表现模式盒子大小为 width + padding + border content-box:此值为其默认值,其让元素维持W3C的标准Box Mode 2.box-sizing:border-box 以盒子边框为界自己管理里面的元素 border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的盒子阴影 box-shadow:水平阴影垂直阴影模糊距…

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

关于float属性的脱离文档流的问题使用float浮动后,元素虽然会脱离文档流,但还处在文本流的位置当中,所以就不会出现重叠的效果吗? 下面我自己试了一下,给两个DIV分别设置了样式,而只给第一个DIV设置了float浮动属性,然而效果显示,第一个DIV覆盖了第二个DIV,出现了重叠效果脱离文档流:也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. float只是脱离了文档流的dom空间但是还占据着文字空间.使用float脱离文档流时,其他…

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

01 复习内容复习之前的知识点 02演示VS创建元素 03div和span区别通过display属性进行DIV与Span之间的转换.div->span 设置display:inline span->div 设置display:block <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont…

文档流 css中间float clear和布局

文档流先说说什么是公文流转什么流它是一系列连续的东西 <div style="background-color:pink;width:40px;height:80px;">第一个框 </div> <div style="background-color:red;width:40px;height:80px;">第二个框 </div> <div style="background-color:ye…

文档流 css中的float clear与布局

文档流先说说什么是文档流流是什么就是一串连续的东西 <div style="background-color:pink;width:40px;height:80px;">第一个框 </div> <div style="background-color:red;width:40px;height:80px;">第二个框 </div> <div style="background-color:yel…

CSS文档流与块级元素和内联元素

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆css布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流将窗…

CSS文档流与块级元素和内联元素（文档）

CSS文档流、块级元素、内联元素

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流将窗…

css盒子模型、文档流、相对与绝对定位、浮动与清除模型

一.CSS中的盒子模型标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. html元素一般分为块级元素和行内元素块级元素:块级元素排斥其他元素与其位于同一行,可以设定宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素, 常见的块级元素有div, p ,h1~h6,ul,table,form,hr等. 每一个块元素都可以分为cont…

CSS层叠的问题、标准文档流、伪类选择器

一.层叠的问题 CSS有两个性质: 1.继承性 2.层叠性:选择器的一种选择能力,谁的权重大就选谁层叠性又分为: 1).选不中:走继承性 (font.color.text.) 继承性的权重是0 若有多个父级都设置了样式,走就近原则 2).选中了 a.权重的问题,权重大,就选谁的样式 b.权重相同,谁在后,选择谁 *纯标签和类没有可比性,纯类和ID也没有可比性二.标准文档流 1.含义:浏览器的排版是根据元素的特征(快和行级),从上往下,从左到右排版,这就是标准文档流 2.浮动 float:l…

css中哪些属性会脱离文档流

一共有三个属性会使元素脱离文档流: (1)浮动 (2)绝对定位 (3)固定定位元素脱离文档流会导致父元素高度塌陷,要修复高度塌陷问题,可以将子元素与父元素放在同一个BFC中…

day 41 标准文档流浮动

一.标准文档流什么是标准文档流宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画标准文档流下有哪些微观现象? 1.空白折叠现象多个空格会被合并成一个空格显示到浏览器页面中.img标签换行写.会发现每张图片之间有间隙,如果在一行内写img标签,就解决了这个问题,但是我们不会这样去写我们的html结构.这种现象称为空白折叠现象. 2.高矮不齐,底边对齐文字还有图片大小不一,都会让我们…

python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

昨日内容回顾高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 a LoVe HAte 必须要遵循这个准则 “爱恨准则” nth-child(3n+1) first-child last-child 继承性和层叠性继承性: 文本的属性: color text-*,line-*,font-* 盒子属性定位布局的元素层叠性: 1.先看标签元素有没有被选中,如果选中…

padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.我们在这里重点讲标准模型. 盒模型示意图盒模型的属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离 border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子的距离如果让你做一个宽高402*402的盒子,您如何来设计呢? 答案有…

HTML元素脱离文档流的三种方法

一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流. 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成了文档流. 二.什么是脱离文档流? 元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方). 脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间. 三.怎么脱离文档流? 1:float…

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

1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Co…

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

所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 当前所知的脱离文档流的方式有两种:浮动和定位. a.定位属性positon 先看一下定位.看一段对定位各个字段的描述,有助于理解值描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top&q…

CSS文档流

文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧.文字内容会围绕在浮…

从文档流来看内联元素和块元素的css排版

veda原创[抄录]讲得很好存自己这里看从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理…

{03--CSS布局设置} 盒模型二 padding bode margin 标准文档流块级元素和行内元素浮动 margin的用法文本属性和字体属性超链接导航栏 background 定位 z-index

03--CSS布局设置本节目录一盒模型二 padding(内边距) 三 boder(边框) 四简单认识一下margin(外边距) 五标准文档流六块级元素和行内元素七浮动八 margin的用法九文本属性和字体属性十超链接导航栏案例十一 background(背景) 十二定位十三 z-index 一盒模型盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型.…

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