CSS中的流-优快云博客

本文链接：https://blog.youkuaiyun.com/crazyhsl/article/details/111768750

本文介绍了 CSS 中的标准流、浮动流、clear 和定位流。标准流涉及 display 属性取值；浮动流通过 float 属性让元素左右浮动，脱离标准流；clear 属性可使元素浮动时不紧贴其他标签；定位流有绝对定位、固定定位，z - index 可改变前后加载顺序。

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

标准流

>1.HTML标签被分为两种类型，一种是块级标签(独占一行，能够设置宽高)，另外一种是行级标签(不独占一行，不能设置宽高)
>
>2.这两种类型的标签都是按照标准流的方式进行渲染加载的(排列)，行级标签从左到右加载，块级元素从上到下加载。

display

display属性：常用取值 inline(行级元素)、block(块级元素)、inline-block(行内块元素)，none(隐藏，不占空间)

浮动流

1.浮动流，设置标签的属性float，它能够让元素向左或者向右进行浮动，浮动流只能是左右浮动没有上下浮动，如果元素按照浮动流渲染，那么该元素会脱离标准流，在浮动流中没有行级元素和块级元素之说。但是都可以设置宽高。

2.在标准流的加载方式下，如果更改标准流，那么该元素后面的元素会相应的顶上来。

3.如果按照浮动流进行加载，在浮动流加载的情况下，元素是之间排列是按照紧邻排列，中间没有空隙。

浮动流一般加载在标准流的上面

clear

设置clear属性，能够使元素在浮动的过程中不去紧贴其他标签，只能影响自己，不能影响其他的元素

定位流

 相对定位

不会脱离标准流。相对于在标准流的位置进行位置移动，所以下面的元素不会顶上来。
属性position设置值为relative，进行位置移动结合属性top、left、right、bottom进行空间位置移动。

绝对定位

会脱离标准流，所以下面的元素会顶上来，相对于在标准流的位置上进行空间移动
设置属性position为absolute,同样也需要结合top、left、right、bottom四个属性搭配使用
如果它的父元素或者祖先元素都没有设置定位流(相对定位、绝对定位、固定定位)，绝对定位相对于body进行定位。
如果父元素或者祖先元素有定位流，绝对定位相对于父元素或者祖先元素(就近原则)。
在绝对定位中，也是不区分块级元素和行级元素，但是都可以设置宽高。