脱离文档流

2024-12-17 18:09:05

一.什么是脱离文档流？

在前端开发中，通常情况下，块级元素会垂直排列，内联元素会水平排列。脱离文档流指的是HTML元素不再遵循文档的布局流程，不再占据文档流中的空间，后续元素会忽略其存在，就像它不存在一样进行排列。

二.脱离文档流的方法

1.浮动（float）：使用float属性，定位元素会脱离文档流。其他盒子会无视这个元素，但是其他盒子中的内容会为这个元素让出位置。举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       
        .first {
            width: 200px;
            height: 200px;
            border: 1px solid rgb(0, 255, 13);
            float: left;
        }
        .second {
            width: 100px;
            height: 100px;
            border: 1px solid rgb(1, 1, 15);
            background-color: blueviolet;
        }
       
    </style>
</head>
<body>
 <div class="one-container">
    <div class="first">我是float定位的元素</div>
    <div class="second">我是正常元素</div>
 </div>

 
</body>
</html>

浮动元素造成的影响：

1.1父元素高度坍塌

1.2后续元素会造成影响

解决方法：

1.3.1.给父元素设置高度，撑开元素本身的大小

1.3.2.受相应的元素添加clear属性（clear: left/right/both)

1.3.3.overfloat清除浮动：如果父元素塌陷同级元素也受到影响，在父级

中使用overflow:hidden清除浮动，但是需注意，此时父元素不能设置高度。

1.3.4.使用伪类：如果父元素塌陷同级元素也受到影响，为父元素添加伪类after,设置空内容，并使用clear:both.

.parent::after{
        content: "";
        display: block;
        clear: both;
    }

2.定位：绝对定位（position:absolute）和固定定位（position:fixed）

2.1.绝对定位（position:absolute）的元素是相对于父元素该元素的父类进

行定位（父类的position是非static（默认定位）定位的元素，如果直系父类不满足，就继续向上查找）。

2.2.固定定位（position:fixed）相对于浏览器窗口进行定位

码农公寓

相关文章