对CSS中的Position、Float属性的一些深入探讨

Position属性

概述

position 属性用于定义元素的定位方式。它常用于一些特殊的定位需求。这个属性的值有4个：static、relative、absolute和fixed。

• static: 默认值，表示元素的定位不会受到影响，元素会遵循正常的文档流（normal flow）。
• relative: 表示元素的定位相对于它正常的位置进行定位，它不会使元素脱离文档流。
• absolute: 表示元素的定位相对于它最近的非 static 定位的祖先元素进行定位。如果祖先元素都是 static，则它相对于文档 body 元素定位。它会使元素脱离文档流。
• fixed: 表示元素的定位相对于浏览器窗口视图（viewport）进行定位。它会使元素脱离文档流。

其中，relative 和 absolute 都会产生相对定位的效果，它们的区别在于参照物不同。

实例

这个例子展示了使用 position: relative 定位实现相对定位效果：

<div style="position: relative; left: 30px; top: 30px">
  相对定位
</div>

上面的代码中，div 元素的 position 属性设置为 relative，然后通过 left 和 top 属性将元素移动了 30 像素。

这个例子展示了使用 position: absolute 定位实现绝对定位效果：

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

上面的代码中，外层的 div 元素的 position 属性设置为 relative，内层的 div 元素的 position 属性设置为 absolute，然后通过 left 和 top 属性将内层元素与外层元素左上角的距离分别设为 30 像素，从而实现了绝对定位效果。

Float属性

概述

float 属性用于将元素浮动到文本流中的左侧或右侧，并允许其他元素围绕它。它有 3 个值：left、right 和 none。默认值是 none。

• left：将元素向左浮动。
• right：将元素向右浮动。
• none：元素不浮动。

实例

这个例子展示了使用 float 属性实现图片与文字环绕的效果：

<div style="border: 1px solid black;">
  <img src="https://picsum.photos/200/300"><br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc euismod molestie orci ac ultrices. Sed a tellus eget enim pretium hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ac massa molestie, hendrerit orci quis, ultricies ex. Etiam vel neque feugiat, fringilla elit ut, sodales sapien. Maecenas euismod, velit sit amet egestas pulvinar, metus ipsum euismod libero, eu varius elit velit et magna. Praesent vel tincidunt enim, eu placerat elit. Morbi viverra risus at enim sagittis, vitae tempor neque pulvinar. Donec eget ipsum imperdiet, rhoncus lacus ac, varius risus. Aliquam at nisl vel sem congue condimentum.
</div>

上面的代码中，img 元素的 float 属性设置为 left，使其向左浮动。由于其容器的文字环绕效果，将会在图片左侧留出一定的空间，让后面的文字不会和图片重叠。