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" (https://link.segmentfault.com/?enc=g1gSZTQ7PMe8E0TSKSwyvg%3D%3D.2cBamYwIWdvTp%2FEIXHmhTd6NMLwyJ9qZLIW67yYzvJ%2BEdR5SKuRA4hgf0Fju7w2xyGH4X6lz6wJBmGe3l6i2fg%3D%3D)
«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" (https://link.segmentfault.com/?enc=pdlVVU8JC71ktp0XoHzmRg%3D%3D.eDGSCRwEKs7HBAVjUAxBkZXy53fC4SgDnU1N6nbQ7ODGCf9sTZRb239CKGpMWkWY2o7MW0bnpJbQzEM28tojBQ%3D%3D)
«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" (https://link.segmentfault.com/?enc=KnwHMFMrRogdzdTTxsjt3g%3D%3D.OPhzxGWT9410i98cyGAXPy2BEPFQh%2FghcMypnd3LGRIGmG%2BGMUzqSVR6hwdn%2FMyMduaMitsoe5J%2FhxC2ndtNCw%3D%3D)
«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"是一样的吧？长度算好了，就看它在哪一行了，当前行还是另起一行？另一个解答中说明该问题。)".»
颜如玉你信不信
感觉对了