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

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

一纸荒凉 * Armani

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

阅读量3k

点赞数 1

分类专栏： HTML+CSS

本文链接：https://blog.youkuaiyun.com/weixin_43958049/article/details/99428703

版权

本文探讨了浮动布局导致的父元素高度塌陷问题及其解决方案。讲解了文档流的概念，以及如何通过float、position（absolute, fixed, relative）使元素脱离文档流。提到了恢复文档流的方法，如overflow: hidden、clear: both以及对父元素的其他处理方式，以解决高度塌陷问题。" 6626962,918676,MFC对话框置于最前端技巧,"['MFC', '应用开发', 'Windows']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人博客地址：[http://www.zhsh666.xyz/](http://www.zhsh666.xyz/)

文章目录

一、文档流
1. 什么是文档流？
2. 什么是脱离文档流
二、怎么脱离文档流
1. float
2. position
a. position：absolute
b. position：fixed
c. position：relative
三、怎么恢复文档流
1. 对于float 的元素，对父级元素可以使用overflow：hidden
2. clear：both
如何解决浮动布局导致的父元素高度塌陷问题？

一、文档流

1. 什么是文档流？

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

2. 什么是脱离文档流

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

二、怎么脱离文档流

1. float

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

2. position