脱离文档流的三种方法

m0_63732218

于 2023-12-25 11:47:05 发布

阅读量752

点赞数 10

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_63732218/article/details/135165026

版权

标准流会产生的问题：

1.高矮不齐，底边对其

2.空格折叠

<p>大家好，我是p     标签</p>

不管你放多少空格，换行，Top都只会显示一个空格
3.元素无间隙

 <img src="2.jfif" alt="">
    <img src="2.jfif" alt="">

要是想要两张照片之间没有空隙，就只能这样写，但是这样写就有个弊端，如果代码很长就会不方便查看和编写。

<img src="2.jfif" alt=""><img src="2.jfif" alt="">

效果图：

要想解决这些问题就得脱离文档流

脱离文档流有三种方法

1.浮动
2.绝对定位
3.固定定位

浮动

定义

float属性定位元素在哪个方向浮动，任何元素都可以浮动

值	描述
left	元素向左浮动
right	元素向右浮动

原理

浮动使元素脱离了文档流

浮动只有左右浮动，没有上下浮动

如果想要他横向摆放得考虑他宽度够不够，不够则会被挤到下面

代码如下：

 <style>
        div{
            width: 300px;
            height: 300px;
            float: right; /*控制元素向右浮动*/
        }
        .content{
            width:700px;
            height: 700px;
            background-color: blanchedalmond;
            float: left;
        }
        .box1{
            background-color: aqua;
        }
        .box2{
            background-color: hwb(36 19% 13%);
        }
        .box3{
            background-color: rgb(255, 0, 51);
        }
    </style>
</head>
<body>
     <div class="content">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
     </div>   
       
</body>

脱离文档流之后，元素相当于在页面上面增加一个浮动层来放置内容，可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象

浮动的副作用

当元素设置float浮动后，该元素就会脱离文档流并向左向右浮动。

1.浮动元素会造成父元素高度塌陷

2.后续元素会受到影响

清除浮动

当父元素出现塌陷的时候，对局势是不利的，所以我们必须清除浮动的副作用

解决方案有很多种

1.父元素设置高度

可以撑开元素本身的大小

2.受影响的元素添加clear属性

 clear: both;

clear有三个值可以选择left，right，both，但在实际应用中不太清楚是左浮动还是右浮动，所以设置为both

3.overfloat清除浮动

如果父元素塌陷同级元素也受到影响可以在父级元素中使用overfloat清除浮动

但是！！！

这种情况父级元素不能设置高度

在父级元素的样式里添加：

overflow:hidden;

4.伪对象方式

如果父元素塌陷同级元素也受到影响，还可以使用伪对象的方式来清除副作用

为父元素添加伪类afler，设置空的内容，并使用clear：both；

这种情况下，父级也是不能设置高度的

.container{
        width: 500px;
        background-color: rgb(69, 68, 67);
        /* float: left;
        overflow:hidden;
        clear: both; */
    }
    .container::after{
        content: "";
        display: block;
        clear: both;
    }

定位

定义

psition属性指定了元素的定位类型

值	描述
relative	相对定位
absolute	绝对定位
fixed	固定定位

其中，绝对定位和固定定位会脱离文档流

设置定位后,可以使用四个方向值进行位置的调整：left,top,right,bottom

相对定位

没有脱离文档流可以调整元素的位置

 position: relative;

绝对定位

脱离了文档流之后调整元素的位置，会有压盖的现象存在

 position: absolute;

固定定位

脱离文档流之后固定在某个位置，不会随着页面的滚动位置发生变化，一个页面一般不会涉及多个固定定位。

温馨提示

设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行调整的，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档

z-index

可以改变元素覆盖的顺序，值越大，元素就在越下层。

z-index: 5;

m0_63732218

关注

10
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
脱离文档流的三种方法

float属性定位元素在哪个方向浮动，任何元素都可以浮动值描述left元素向左浮动right元素向右浮动psition属性指定了元素的定位类型值描述relative相对定位absolute绝对定位fixed固定定位其中，绝对定位和固定定位会脱离文档流设置定位后,可以使用四个方向值进行位置的调整：left,top,right,bottom。
复制链接

扫一扫