Float块元素没有指定宽度

Question

我正在阅读 Head First HTML和CSS 这本书，其中写道，任何浮动元素的要求是它必须具有宽度。我尝试浮动一个div元素而不指定宽度，并且float属性可以工作（它尽可能地向最右边移动div）。这是否意味着书中有错误，或者是我遗漏的东西？

Answer 1

是的，您可以在级联中声明没有width值的浮动元素。然后，通过defaulting流程，指定的值将为initial value。

对于width，初始值为auto。

CSS解释了当floated non-replaced element具有width: auto：

时会发生什么

  

如果width计算为auto，则使用的值为   ＆＃34;收缩以配合＆＃34;宽度。

     

收缩 - 拟合宽度的计算类似于计算   使用自动表格布局算法的表格单元格的宽度。   粗略地：通过格式化内容来计算首选宽度   除了发生显式换行之外没有断行，   并且还计算优选的最小宽度，例如，通过尝试所有   可能的换行符。 CSS 2.1没有定义确切的算法。   第三，找到可用宽度：在这种情况下，这是宽度   包含的块减去margin-left的使用值，   border-left-width，padding-left，padding-right，   border-right-width，margin-right以及任何相关的宽度   滚动条。

     

然后缩小到合适的宽度是：

min(max(preferred minimum width, available width), preferred width)

＆＃34;收缩适应＆＃34;算法现在称为fit-content measure。

Answer 2

float:right是简单的元素堆叠，从左到右，直到填充线宽，然后从上到下。就像写英文报纸一样。

float:left用于侧边栏，它会占用整个页面，除非其宽度受到限制。这就是必须指定width的原因。