图片溢出容器是因浮动元素脱离文档流导致父容器高度塌陷，使用 clearfix 通过伪元素插入清除浮动，使父容器正确包裹子元素，从而解决溢出问题。
当图片或其他浮动元素超出其父容器时，通常是因为父容器无法正确“感知”子元素的高度。这是因为浮动元素脱离了正常的文档流，导致父容器高度塌陷。解决这个问题的关键是清除浮动，而 clear fix 是一种常用且有效的技术。
为什么会出现图片溢出容器？
当你对图片或块级元素使用 float: left; 或 float: right; 时，这些元素会脱离标准流，父容器不再包裹它们，视觉上就像图片“溢出”了容器。
例如：
.container {width: 300px;
border: 1px solid #ccc;
}
.container img {
float: left;
}
此时，如果 .container 没有设定固定高度，它将不包含浮动的图片，造成布局问题。
立即学习“前端免费学习笔记（深入）”；
使用 Clear Fix 清除浮动
Clear fix 的核心思想是在浮动元素之后插入一个“清除”元素，强制父容器延伸以包含所有浮动子元素。
现代推荐做法是使用伪元素实现 clear fix，避免额外 HTML 标签：
.clearfix::after {content: "";
display: table;
clear: both;
}
将这个类应用到包含浮动元素的父容器上即可：
<div class="container clearfix"><img src="image.jpg" alt="示例图片">
</div>
这样父容器就能正确包裹图片，防止溢出。
其他清除浮动的方法对比
- 给父元素设置 overflow: hidden;：简单有效，但可能隐藏需要显示的溢出内容（如下拉菜单）
- 添加空的清除元素：在HTML中加 <div style="clear:both"></div>，结构不优雅，已过时
- 使用 Flex 或 Grid 布局：现代方案，无需浮动，从根本上避免问题
虽然 clear fix 是兼容性好、广泛支持的解决方案，但在新项目中建议优先考虑 Flexbox 等现代布局方式。
总结
图片溢出容器多由浮动引起，通过为父容器添加 clear fix 类可有效解决。使用 ::after 伪元素方式既干净又无需修改HTML结构。基本上就这些，不复杂但容易忽略。
