CSS float 与 position absolute 区别

相同点

float和position: absolute都会脱离文档流。

但是float脱离文档流的垂直排列规则。

float

float元素脱离垂直流，但保留水平占位（宽度占位）。

对于文字、行内元素还有特殊规则：float会为这些元素保留垂直方向的占位区域。

绝对定位

position: absolute不会保留内容宽度和高度。

代码

<div style="position: relative">
    <span style="width: 100px; height: 40px;background-color: red;position: absolute">图片</span>
    <span style="overflow-wrap: break-word;">hello world你好hello world你好hello world你好hello world你好hello world你好hello world你好hello world你好hello world你好hello world你好hello world你好hello world你好</span>
</div>