max-width:100%是解决图片撑破容器的核心方案；需配合height:auto保持宽高比，避免使用width:100%，并注意父容器限制、上下文影响及CSS优先级等细节。

因为默认box-sizing:content-box将width视为内容宽，padding和border额外增加；改用box-sizing:border-box可使width包含padding和border，避免撑破父容器。

图片超出容器宽度的直接原因是未约束尺寸，应使用max-width:100%配合height:auto，并确保父容器有明确宽度；清除浮动仅解决塌陷，不控制溢出。

清除浮动是解决最后一个元素下移的根本方法，因父容器高度塌陷导致；box-sizing:border-box仅防尺寸溢出间接辅助，现代布局应优先使用flex或grid。

Flex元素无法放大主因是缺乏剩余空间或受固定尺寸限制，需确保父容器为flex布局、移除width/height、合理设置flex属性并处理内容最小尺寸。

手机端导航栏撑破屏幕的主因是固定宽度、长文本、浮动残留或flex未设换行/收缩规则；应改用百分比+max-width、flex-wrap、flex弹性收缩、box-sizing:border-box及响应式折叠菜单。