Web开发中的标准流、浮动、定位的解释

我又来搬代码了

于 2023-05-16 17:58:11 发布

阅读量430

点赞数

分类专栏： Web前端学习笔记文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_43358469/article/details/130710890

版权

Web前端学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在 Web 开发中，标准流、浮动和定位都是 Web 布局中常用的机制，各自都有其特点和适用范围。在实际开发中，需要根据需求选择合适的布局方式，并注意浏览器兼容性、性能优化等方面的问题。

标准流

标准流，也称文档流或普通流，是所有元素默认的布局方式。在标准流中，元素按照其在 HTML 中出现的顺序，自上而下依次排列，并占据其父容器内的可用空间。标准流中的元素按照其自然尺寸和位置进行布局，不会特意改变元素的属性或位置。

<div>
  <div>第一个 div</div>
  <div>第二个 div</div>
  <div>第三个 div</div>
</div>

在标准流的布局中，以上代码将生成一个垂直方向的布局，三个 div 元素依次排列，如下图所示：

+--------------------+
| 第一个 div         |
|                    |
|--------------------|
| 第二个 div         |
|                    |
|--------------------|
| 第三个 div         |
|                    |
+--------------------+

浮动

浮动，通过设置元素的 float 属性为 left 或 right，使其从标准流中“脱离”，并向左或向右移动。浮动元素不再占据标准流中的位置，而是尽可能地靠近其相对定位的父元素，并可以让其他元素环绕它。浮动常常用于实现多栏布局、图片环绕文字等效果。

<div>
  <div style="float: left; width: 50%;">左侧浮动 div</div>
  <div style="width: 50%;">右侧普通 div</div>
</div>

在浮动的布局中，以上代码将生成一个两栏布局，左侧 div 会浮动到一边，右侧 div 则会占据剩余的空间，如下图所示：

+--------------------------------+
| 左侧浮动 div     | 右侧普通 div |
|-----------------|--------------|
|                 |              |
|                 |              |
|                 |              |
+--------------------------------+

需要注意的是，浮动元素并不像标准流元素那样自适应宽度，需要明确指定宽度才能得到正确的布局效果。

定位

定位，元素的 position 属性值除了默认值 static 以外，还有三个有效值：absolute，relative 和 fixed。使其从标准流中“脱离”，并相对于其最近的已定位祖先元素（如果没有则相对于 body 元素）进行定位。定位元素可以通过设置 top、right、bottom 和 left 等属性来精确控制其位置。定位常常用于实现层叠效果、延迟加载等特殊效果。

<div style="position: relative;">
  <div style="position: absolute; top: 20px; left: 20px;">绝对定位 div</div>
</div>

在绝对定位的布局中，以上代码将生成一个相对定位的父元素，以及一个相对于该父元素进行绝对定位的子元素，如下图所示：

+-------------+
|             |
| 绝对定位 div |
|             |
+-------------+

需要注意的是，绝对定位会使元素从文档流中脱离，可能对布局造成影响，特别是在不同分辨率下或页面缩放时，元素的位置和尺寸可能会出现偏差。因此，使用定位时需要特别小心，避免造成布局错误或用户体验问题。

定位四个属性的区别

static

首先是最常见的默认值 static，这个可以理解为没有设置 position 属性时的默认行为。元素在 normal flow 和文档流中，它不会被特殊位置处理，也不能通过 top、right、bottom、left 属性进行定位。简单来说，静态定位就是元素按照自己在 HTML 文档中的出现顺序在网页中排列。

relative

相对定位（relative）是指元素从其在 normal flow 的位置开始定位，然后相对于原来的位置进行移动。相对定位不会影响其他元素的位置，在文档流中仍然占据原来的空间。使用 top、right、bottom 和 left 属性可以将元素向上、向右、向下、向左移动，但还是在原来的文档流中，并没有脱离文档流。如果不设置 top、right、bottom 和 left 属性，则相对定位的元素不会改变位置。

absolute

绝对定位（absolute）是指元素置于距离它最近的已定位父元素或根元素的位置，它不再占据文档流中的位置，且不影响其他元素的位置。绝对定位的元素会随着父元素或根元素滚动，而不是随着其父元素内其他元素的滚动而滚动。此外，绝对定位的元素可以通过设置 top、right、bottom 和 left 属性改变其位置。如果没有已定位的父元素，就会一层层的往上找，采用最近原则，最后如果一个也没有的话，就使用浏览器窗口当做父元素（此时相当于fixed）