CSS 中父元素设置了 float 和 position，子元素为 absolute，子元素的宽度根据什么计算？
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.parent {
float: left;
position: relative;
}
.child {
position: absolute;
}
</style>
<title>Document</title>
</head>
<body>
<div class="parent">
<span>Lorem ipsum dolor sit amet（短的）</span>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi veniam enim fugit nesciunt odit dignissimos neque culpa et sequi（长的）</div>
</div>
</body>
</html>
效果如下：
父元素和子元素都没有定义宽度，为什么现在这个子元素的宽度和父元素一样宽？什么原理呢？
如果子元素的 position 不设置或者设置为 relative 就不是这样了。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
float 宽度的计算公式
preferred minimum width 是元素最小需要的宽度，一般通过尽可能的断行得出
available width 是元素可用的宽度，用父容器的宽度减去这个元素已设置的左右 margin、border、padding 以及滚动条的宽度
preferred width 是尽可能不断行，得出元素正常显示时需要的宽度
具体到这个例子，父元素里 in-flow 的元素就只有 span ，且 span 的宽度小于夫容器的宽度，所以用了 preferred width
子 absolute 元素，因为 width/height 以及四个 offset 都没有设值，于是 left 和 top 都取 0，再按 float 方式计算宽度。
这次父元素宽度为 span 宽度，小于 absolute 元素 preferred width，所以用了 available width。
父元素不定义宽度的情况下，它的宽度由子元素决定。这里有两个子元素，所以宽度和两个子元素里最大的一个相同。
如果子元素的position定义为absolute，那么它就变得没有宽度和高度。这时整个父元素的宽度和高度由第一个span子元素决定，而第二个div子元素的宽度取父元素的宽度值。