css的浮动和定位

CSS是前端开发中不可或缺的一部分，其中浮动和定位是常用的布局方式。本篇博客将详细介绍浮动和定位的概念、用法和注意事项，适合新手学习。

一、浮动

1.概念

浮动是指将元素从正常的文档流中移除，使其脱离文档流并向左或向右移动，直到其外边缘碰到包含块或另一个浮动元素的边缘为止。

2.用法

（1）float属性

float属性用于设置元素的浮动方向，可选值有left、right和none。默认值为none。

（2）clear属性

clear属性用于清除浮动，使后面的元素不再受到浮动元素的影响。可选值有left、right、both和none。默认值为none。

3.注意事项

（1）浮动元素会脱离文档流，可能会导致父元素高度塌陷，需要清除浮动。

（2）浮动元素会影响后面元素的位置，需要注意元素的顺序。

（3）浮动元素的宽度默认为内容宽度，需要设置宽度才能使其具有包裹性。

二、定位

1.概念

定位是指通过设置元素的位置属性，将元素放置在文档流之外的指定位置。

2.用法

（1）position属性

position属性用于设置元素的定位方式，可选值有static、relative、absolute和fixed。默认值为static。

（2）top、right、bottom、left属性

top、right、bottom、left属性用于设置元素相对于包含块的位置，只有在元素的position属性值为relative、absolute或fixed时才有效。

（3）z-index属性

z-index属性用于设置元素的堆叠顺序，只有在元素的position属性值为relative、absolute或fixed时才有效。

3.注意事项

（1）定位元素会脱离文档流，可能会导致父元素高度塌陷。

（2）定位元素的位置是相对于包含块而言的，需要注意包含块的设置。

（3）定位元素的堆叠顺序是根据z-index属性值的大小来确定的。