元素没有设置宽度，负margin失效不起作用(没有增加宽度)

Question

<style>
            * {box-sizing: border-box;}
            .main {width:1200px;height:300px;margin:auto;padding-right: 10px; background: #eaeaea;}
            .left {float:left;padding: 10px; background: #e26711;}
            .right {overflow:hidden;margin: 0 -200px 0 0;padding: 10px;background-color: #f90;}
</style>
<div class="main"><div class="left">标题</div><div class="right">内容</div></div>

是这样的一个布局

在左边有个左浮动元素的情况下，右边的overflow:hidden元素的负mairgin没有改变元素宽度的。

Answer 1

经过排除测试首先认为导致这个现象的原因应该和bfc元素不能覆盖overflow:hidden元素有关，但是这里负margin只会增加.right的宽度，和重叠没关系啊，而且我测试中给.right一个很大的左边距，这样不就能保证不会覆盖了吗，right宽度增加以后应该会右侧延生一直超出父元素。
就这样，这个现象困扰我很久，终于在规范中找到了解释
参照https://www.w3.org/html/ig/zh...

table、块级的可替换元素，或者在正常排版流中创建了新块格式化上下文的元素Note.png，此类元素的border框必须与同一个块格式化上下文中任何浮动框的外边距框没有重叠。如果需要，具体的实现可把该元素放在之前出现的所有浮动框下方，以清除浮动的效果，但如果有足够的空间来摆放该元素就应该把它摆放在浮动框旁边。他们可能甚至使得上述元素的框比章节10.3.3中定义的更窄。CSS2对用户代理何时可将上述元素紧挨着浮动或上述的元素可以变窄多少并没有定义。

按规范说为了不让两个元素重叠，这里.right如果排不下就会放到.left下方。我这里.right宽度是默认的auto。
那么给他设置一个很大的宽度呢

果然和规范描述一致。那么结论就是如果这里变宽就会掉下去，但是如果能不掉下，就去限制他变宽。
问题看似解决了，又有了新的问题，为什么左侧有浮动的时候右侧如果超长会掉下去呢，按规范理解是为了清除浮动
可是和我开始的疑问一样，只要给左侧一个margin不就可以确保不会重叠了吗。。。先这样吧