overflow:clip致兄弟元素占用异常空间，float:left修复原因咨询

核心原因 #

• BFC创建的浏览器行为差异：
  overflow:hidden 是标准的BFC（块格式化上下文）触发属性，能让容器包裹内部浮动元素，避免外部布局受干扰。但在Chrome中，overflow:clip 默认不会触发BFC（即使MDN文档描述它和hidden行为类似），这就导致#container-outer无法把#tax-deduction-calculator和#formula这两个浮动元素“框住”。
• 浮动元素的布局溢出影响：
  当父容器没有BFC时，浮动元素会脱离正常文档流，但依然占据空间。后续的#scrolling-container（包含<p>元素）会把浮动元素的高度算进自身布局里，导致<p>被迫占用额外的空间——大小正好是那两个浮动元素的总高度。

修复手段的原理 #

• 给#container-outer加float:left：浮动属性会触发BFC，让父容器正确包裹浮动元素，切断对内部#scrolling-container的布局干扰。
• 给#scrolling-container加overflow:hidden/auto/scroll：让#scrolling-container自己创建BFC，隔离外部浮动元素的影响，<p>的高度自然恢复正常。
• 把#container-outer的overflow:clip换成overflow:hidden：通过标准的BFC触发属性，解决浮动元素的包裹问题。

内容的提问来源于stack exchange，提问作者qwerty_99