HTML | 浮动和定位对文档流的影响

最新推荐文章于 2021-08-27 22:20:51 发布

_buonanotte

最新推荐文章于 2021-08-27 22:20:51 发布

阅读量304

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： HTML CSS 文档流浮动定位

本文链接：https://blog.youkuaiyun.com/weixin_43690318/article/details/89409349

前端专栏收录该内容

1 篇文章

订阅专栏

本文探讨HTML中的文档流概念，以及浮动和定位如何改变文档流。通过实例展示了浮动布局导致的父级元素高度变化问题及其解决办法，并简述了定位布局的四种类型：fixed、relative、absolute和static。

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

作者有话说
大家好！这次带来的是HTML的文档流与浮动布局的简单知识。首先将会给大家科普一下文档流的概念，随后再讲述浮动和定位对文档流的影响问题。让我们开始吧！
1.文档流
什么叫文档流？简单来说，就是指元素在页面中出现的先后顺序。一个正常的文档流，会将一个页面从上到下分成一行一行的，其中像div的块级元素会独占一行，像span的行内元素会在一行中水平排列。

讲完了文档流，我们来将脱离文档流，正常的文档流就是我们没有使用浮动和定位去改变的默认情况下的HTML文档结构。也就是说，如果想要一个元素脱离文档流，只要使用浮动或定位就可以了。
2.设置浮动
浮动会影响周围元素，并且还会引发很多意想不到的问题。让我们来看看下面的案例：

<body>
<div id="father"> 
<div>box1</div>
<div>box2</div>
<div>box3</div>
</div>
</body

在这里插入图片描述
上面的布局，便是一个正常的文档流布局。现在，让我们来为box2，box3添加上左浮动设置。下面是显示结果。

我们可以看到，由于设置了左浮动布局，box2和box3脱离了正常文档流。而父级的高度是由其子类撑开的，所以当其子类脱离文档流后，父级元素的高度也会改变。那么我们该如何避免这种父级元素高度改变的情况呢，一般有以下三种方法：

1.直接为父级元素设置高度
2.在父元素上加 overflow:hidden属性
3.在父级元素内的浮动元素后增加一个div并为其设置clear：both；

3.定位布局
定位布局可以使得你将一个元素精确地放在页面上你指定的地方。常见的定位布局有四种：
1.fixed（固定定位）
2.relative（相对定位）
3.absolute（绝对定位）
4.static（静态定位）
其中，固定定位和绝对定位都是脱离文档流的，而相对定位和静态定位则不。
固定定位指的是被固定的元素不会随着滚动条的拖动而改变在窗口上的位置。
而当一个元素被指为绝对定位，它会精准地显示在指定的位置，这个元素将独立于其他元素，可以覆盖在其他元素上面。
静态定位其实就是元素没有指定position时的定位属性。
下面来讲相对定位，用一张图可以表示：
在这里插入图片描述
更多资讯，可以关注公众号：仓鼠学习之旅获得哦，微信号：cangshuxuexi

在这里插入图片描述