脱离文档流和恢复文档流的方法

最新推荐文章于 2025-03-19 00:30:00 发布

Welkin_qing

最新推荐文章于 2025-03-19 00:30:00 发布

阅读量7.3k

点赞数 2

分类专栏： css 文章标签：文档流布局

本文链接：https://blog.csdn.net/Welkin_qing/article/details/88680584

版权

css 专栏收录该内容

29 篇文章

订阅专栏

文章目录

一、文档流
- - 1. 什么是文档流？
  - 2. 什么是脱离文档流
二、怎么脱离文档流
三、怎么恢复文档流

一、文档流

1. 什么是文档流？

将窗体自上而下分成一行一行，并在每行中按照从左到右依次排放元素，称为文档流（normal stream又称普通流）
在html 中，html元素都是盒模型，盒子模型占用一定的空间，依次排放在html 中，形成了文档流。

2. 什么是脱离文档流

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。
脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

二、怎么脱离文档流

1. float

一个元素浮动时，其他内容会“环绕”该元素。（权威指南P289）

2. position

a. position：absolute

绝对定位，absolute脱离文档流后的元素，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。
当父级元素的position全是static的时候，absolute是相对于html来进行定位的。

注意：绝对定位的窗口一般都要设置相对距离，当你同时设置top和bottom的时候，只有top会生效，同理，同时设置left和right的时候，只有left会生效。

b. position：fixed

固定定位，完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）。

c. position：relative

相对定位，元素框偏移某个位置，元素保持未定位前的形状，他原本所占的空间保留

三、怎么恢复文档流

1. 对于float 的元素，对父级元素可以使用overflow：hidden

2. clear：both

对子元素使用clear
我对两个盒子都进行浮动，并且都设置了clear：both 结果如下：

 <style>
    *{padding: 0;margin: 0;}
    .box{
        border: 5px solid yellowgreen;
    }
    .box1,.box2{width: 100px;height: 100px;background-color: darkcyan; border: 1px solid black;}
    .box1,.box2{float: left;clear:both}
    
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>

对父元素使用clear

<style>
    *{padding: 0;margin: 0;}
    .box{
        border: 5px solid yellowgreen;clear:both;
    }
    .box1,.box2{width: 100px;height: 100px;background-color: darkcyan; border: 1px solid black;}
    .box1,.box2{float: left;}
    
    </style>

上面的浮动，下面的清除时
上面的浮动时

可以恢复

 <style>
    *{padding: 0;margin: 0;}
    .box{
        border: 5px solid yellowgreen;
    }
    .box1,.box2{width: 100px;height: 100px;background-color: darkcyan; border: 1px solid black;}
    .box1{float: left;}
    .box2{clear:both;}
    
    </style>

下面的浮动，上面的清除时
下面的浮动时：

不可以恢复
一边浮动一边清除，这样是不可以的
（看到这篇文章的小伙伴可以留言，目前我只记得这一种方法）

总结一下

如何解决浮动布局导致的父元素高度塌陷问题？

在浮动元素的后面再添加高度为0一个div，并且让他清除浮动 clear：both
给父元素设置overflow:hidden;
给父元素设置display:inline-block; （会包裹子元素）
给父元素设置一个伪类

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

或者下面这种：

.box:after{
        content: ".";
        display: block;
        clear: both;
        height: 0;//使父元素不会被.撑出来
       overflow: hidden;  //使.隐藏
    }