当浮动元素布局时，它不会占据父元素的布局空间。也就是说，父元素在布局时不会考虑浮动元素，因此浮动元素可能会超出父元素，对其他元素产生影响。
解决方法如下：
方法一：使父元素成为一个 BFC（块格式化上下文）。可以通过设置父元素的 overflow 属性为 auto 或 hidden 来实现。这样，父元素就会关注其内部的高度。但是，必须定义 width 或 zoom:1，同时不能定义 height。当使用 overflow:auto 时，浏览器会自动检查浮动区域的高度。
方法二：使用伪元素清除浮动。这种方法可以有效地解决浮动元素对其他元素的影响问题。具体实现方式是在 CSS 中添加一个伪元素，并对其应用 clear 属性。这样，伪元素就会在浮动元素之后，从而阻止其他元素与浮动元素重叠。
.container::after {
content: " ";
clear: both;
display: block;
visibility: hidden;
height: 0;
}