float与定位脱离文档流布局规则

2024-05-11 16:49:04

脱离文档流的css
1.float:left;
2.position: absolute;
3.position:fixed

一、float

使用float可以脱离文档流。

使用float脱离文档流时，其他盒子会无视这个元素，该元素会浮动于其他文档流之上。

注意！！！：其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

二、position: absolute;

若只指定 position: absolute;
（1）相对于前面的元素则会以正常的文档流方式排练在前面的元素后面

(2) 相对于后面的元素，他将脱离于后面的文档流，后面的元素会无视该元素

.指定他的相对位置
（1）指定left right top bottom 之后会相对相应方向基于父类的位置，若只修改水平方向或者垂直方向的定位，则另一方向还是基于上一点布局

三、 position: fixed;

1.若只指定position: fixed;不设置边距
同position: absolute;

（1）相对于前面的元素则会以正常的文档流方式排练在前面的元素后面

(2) 相对于后面的元素，他将脱离于后面的文档流，后面的元素会无视该元素

2.指定边距
（1）指定left right top bottom 之后会相对相应方向基于父类的位置，若只修改水平方向或者垂直方向的定位，则另一方向还是基于上一点布局

float与定位脱离文档流布局规则相关推荐

BFC机制与浮动定位脱离文档流
BFC机制与浮动定位脱离文档流 BFC块格式化上下文 --w3c规定的一种独立渲染区域渲染流程基本上四个步骤: 1.计算CSS样式 2.构建Render Tree 3.Layout – 定位.大小, ...
html的绝对定位脱离文档流吗,子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素...
纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. test .o ...
一天搞定CSS：BFC布局与普通文档流布局比较--15
BFC:Block Formatting Contexts–块级元素格式化上下文 1.BFC定义它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用关键词解释: 块级元素:父级( ...
什么是脱离文档流？什么是文档流？
浏览器默认的排版方式就是文档流(或者叫标准流)排版方式.脱离文档流就是不按照文档流的排版方式. 文档流的排版方式是:块级元素垂直排布,行内元素和行内块级水平排布.不脱离就是按照这种方式排版,从左到右, ...
float,absolute脱离文档流的总结
dom元素脱离文档流,有如下几种方式: 1. float 脱离文档流,其他dom元素无视他,在其下方布局,但是其未脱离文本流,其他元素的文本会认为他存在,环绕他布局. 父元素会无视他,因此无法获取其高 ...
相对、绝对、固定定位，以及其层级关系和脱离文档流的影响
定位:一般父级用相对定位,子级用绝对定位 1.相对定位:position:relative 2.绝对定位:position:absolute 3.固定定位:position:fixed 默认stati ...
css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
CSS使用display:incline与float:left的区别：脱离文档流参差不齐
脱离文档流对元素设置display:inline-block ,元素不会脱离文本流, 而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果参差不齐:display的空隙可以使用font- ...
定位之相对定位不脱离文档流，绝对定位脱离文档流
今天写后台项目静态组件时,引入了阿里在线图标,造成静态页面有点问题,如下图四个图标位置不对,而且最右边的el-card盒子大小也发生变化. 解决办法:左边第一个el-card,首先想到的是用定位,经 ...

最新文章

热门文章