float和position:absolute脱离文本流的区别

float和position:absolute脱离文本流的区别
原创 paediatrician 最后发布于2016-09-19 10:43:05 阅读数 5375 收藏
展开

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

CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。
  需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。
  而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。
————————————————
版权声明:本文为CSDN博主「paediatrician」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/paediatrician/article/details/52583653

原文地址:https://www.cnblogs.com/justart/p/12255526.html

时间: 2024-10-04 11:04:15

float和position:absolute脱离文本流的区别的相关文章

CSS之float vs position:absolute

补充:ul 应该设置下 list-style: none; 题外话:看了张鑫旭的视频,这家伙把简单的css玩出了新花样,绝对大神级的存在.膜拜下先~ float的作用前面一章已经说过了,但没考虑过的是 position:absolute 作用与float极其类似. 二者都是将自身浮空(垂直于屏幕) -- 其实是将其容器高度塌陷. 不同点在于:float会改变位置,但 position:absolute 则会保存其原有位置!!! 利用 position:absolute 的这个特性,我们可以更好的

我所整理的float, inline-block还有position:absolute

这篇主要写了一下几个知识点: 浮动和inline-block的概念和选择 浮动和position:absolute对于脱离文档流的区别 这篇文章参考了一下几个链接: https://www.zhihu.com/question/24529373/answer/29135021 http://www.w3cplus.com/css/inline-blocks.html 感谢你们的无私分享以及钻研的精神. 浮动最早是用来实现文字环绕图片用的,而不是像现在很多地方用来砌砖头用. inline-bloc

Day50:CSS属性(float、position)

一.float属性 1.基本属性 先来了解一下block元素和inline元素在文档流中的排列方式. block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度.block元素可以设置width.height.margin.padding属性: inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化.inline元素设置width.height属性无效 常见的块级

HTML 文档流和文本流的理解

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

HTML上半部分布局及对于文本流认知

一.文本流 document flow => normal flow 本质:普通流/常规流 流:水流 河流 泥石流 => 自上而下(连续的),连续的 文档:页面主体 文档流:一个连续具有逻辑上下的页面整体 理解:出现在页面中的显示内容,均可以理解为在文档流中(片面的) 概念:将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素. BFC:Block formatting context 概念:由block-level box参与布局,1.左右位置,根据BFC

标准文本流

标准文本流的三个属性 1.默认按顺序排列,若后面空间不足,文章内容会自动换行. 2.高低不一样会默认底端对齐. 3.如果想没有缝隙必须紧密连接,如果编辑代码时有多余空格网页就会有一个空格留位. 如何脱离文本流(按照html划分可叫文本级和容器级) 想让块级和行内相互转化可以使用display,display四个属性none/inline/block/inline-block 1)none 可以用于悬浮下拉菜单,为默认值,用于隐藏. 2)inline 用于把块级变成行内. 3)block 用于把行

position:absolute会使元素脱离文档流

当元素设置position:absolute时,会脱离正常文档流,后面元素会忽略该元素->覆盖 可以给元素设置min-height解决 ------------------------------------------------------- postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: absolute position: relative position: fixed position: static position

position脱离文档流与浮动脱离文档流的区别

以前我觉得position:absolute;是可以脱离文档流的,float:left;也可以脱离文档流,就觉得二者是一样的,感觉可以去浮动的方法来解决position:absolute;引起的父元素塌陷问题,结果证明我错了...下边是一个demo. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 &l

inline元素、inline-block元素在float、position:fixed、position:absolute之后出现的问题

我们知道内联元素是不能设置宽.高的,但是一旦使其脱离了文档流,就可以了,这是因为它已经变成了块级元素. 例1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>floattest</title> <style> div.wrap { width: 500px; height: 300px; m