overflow创建的BFC和float创建的BFC 为什么会有这样的区别？

overflow创建的BFC和float创建的BFC它们都是BFC应该没有区别。故这里的行为不同跟是怎么产生的BFC是没有关系的。

这应该和block width的计算(width:auto or width: fit-content)、float元素流出normal flow以及float与之后的bfc不会发生重叠有关。

行为1:

• float元素是流出normal flow，故后来的在normal flow中元素应该会视它不存在。
• 和float相邻的bfc不会和该float元素的margin-box有重叠(设置上面图片的margin-right: 10px的话，图片的右侧和右侧的bfc之间会有空隙。)。

• 既要视该float元素不存在又不和它重叠，该bfc会变窄，变窄到占据该行剩余的宽度。

  • 前提应该是width为auto的时候。

    • 此时，'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block，这里的width of containing block的值应该会自动变小，其他不设置都为0，进而width最终的计算值会变小。(如何你设置padding的话，会发现文字空间会被挤得更窄)
    • 如果该元素的最小内容宽度溢出了，也不会换行的，此时设置了overflow:hiddden溢出的部分被隐藏了。

  • 如果我们显示设置了width的值话，是不会自动调节它的大小的。如果设置width为200px，此时剩余空间不足，当前行溢出？or移到下一行？

    • 应该会移动到下一行，这样显示的话比溢出的效果要好。

相关文档规定:css2 9.4.1 block formatting context

This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats)

css2 bfc-next-to-float

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. ""If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space.They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

行为2:

相关官方规定:css2 blockwidth Floating, no-replaced elements

If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines(解读：应该说的是最大内容宽度) other than where explicit line breaks occur, and also calculate the preferred minimum width(解读：应该说的是最小内容宽度), e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width(解读：这里应该就是包含块的大小,300px，这里没有变窄?): in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width)(解读：当文本比较长的时候，最后取值应该是available width 。当文本较短的时，最后取值应该是preferred with。shrink-to-fit width应该和width:fit-content是一样的吧？长度算好了，就看它在哪一行了，当前行还是另起一行？另一个解答中说明该问题。).