float,absolute脱离文档流的总结

dom元素脱离文档流，有如下几种方式：

1. float

脱离文档流，其他dom元素无视他，在其下方布局，但是其未脱离文本流，其他元素的文本会认为他存在，环绕他布局。
父元素会无视他，因此无法获取其高度，这也就是浮动元素父元素高度塌陷的原因。

下面是一个例子：
特别注意的是，浮动元素后面元素的文字虽然对浮动元素形成环绕，但其位置依然受后面元素的宽高的影响。如果
后面元素的宽度过小，文字将不能在右侧环绕，而是显示在浮动元素下方。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {color:#FFF;}#container {width:500px;height:250px;background:#039;}#A {float:left;width:200px;height:200px;background:#C00;}#B {width:480px;height:230px;background:#000;}</style>
</head>
<body><div id="container"><div id="A">你好</div><div id="B">第一，绝对定位与浮动的区别。绝对定位是将元素彻底从文档流删除，并相对于其包含块定位（包含块可能是文档中的另一个元素或者是初始包含块），元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样，该元素再也不会影响其他元素的布局了。如果对元素A使用绝对定位的话，元素B占据元素A之前的位置，与元素A重合在一起，并被元素A覆盖。如图所示。</div></div>
</body>
</html>

2. absolute

完全脱离文档流，其他元素无视他，在其下方布局

3. fixed

完全脱离文档流

4. relative

半脱离文档流，相对自身位置偏移，其自身位置还在，依然占据文档流

参考：https://blog.csdn.net/cxl444905143/article/details/17361045
https://blog.csdn.net/thelostlamb/article/details/79581984

转载于:https://www.cnblogs.com/mengff/p/9555876.html

float,absolute脱离文档流的总结相关推荐

html的绝对定位脱离文档流吗,子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素...
纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. test .o ...
脱离文档流和恢复文档流的方法
文章目录一.文档流 1. 什么是文档流? 2. 什么是脱离文档流二.怎么脱离文档流 1. float 2. position a. position:absolute b. position:fi ...
HTML元素脱离文档流的三种方法
一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流. 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中 ...
relative会脱离文档流吗_脱离文档流和恢复文档流的方法
@[toc] 1. 什么是文档流? 将窗体自上而下分成一行一行,并在每行中按照从左到右依次排放元素,称为文档流(normal stream又称普通流) 在html 中,html元素都是盒模型,盒子模 ...
脱离文档流的方法CSS浮动产生的负面影响及解决办法
https://blog.csdn.net/theLostLamb/article/details/79581984 一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素, ...
HTML脱离文档流的三种方法
一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流. 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中 ...
CSS使用display:incline与float:left的区别：脱离文档流参差不齐
脱离文档流对元素设置display:inline-block ,元素不会脱离文本流, 而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果参差不齐:display的空隙可以使用font- ...
绝对定位relative、相对定位absolute（脱离文档流）
1.脱离文档流,:父元素高度不再包含文档流高度 position:absolute 子元素 position:relative 父元素, 子元素相对于祖先中的第一个relative定位 ...
html 浮动脱离文档流,CSS标准文档流与脱离文档流
标准文档流文档流:指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式.并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素. 标准流的微观现象: 空白折叠现象: 在 ...

float,absolute脱离文档流的总结

float,absolute脱离文档流的总结相关推荐

最新文章

热门文章