布局 - CSS 中父元素设置了 float 和 position，子元素为 absolute，子元素的宽度根据什么计算？
本文介绍了布局 - 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 就不是这样了。
代码和效果：https://jsfiddle.net/rnwmxaLh/6/
解决方案
float 宽度的计算公式
min(max(preferred minimum width, available width), preferred width)
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。
这篇关于布局 - CSS 中父元素设置了 float 和 position，子元素为 absolute，子元素的宽度根据什么计算？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
