浮动（Float）是一种CSS布局属性，通常用于将元素向左或向右移动，使其脱离文档流并环绕在其周围的内容周围。浮动元素会影响其周围元素的布局，可能会导致父元素高度塌陷（父元素无法包裹浮动元素）或元素重叠等问题。
浮动后的特点：
- 元素
脱离文档流，向左或向右移动，其他内容会环绕在其周围。 - 浮动元素不再占据文档流中的位置，可能会导致
父元素高度塌陷。 - 浮动元素会影响其后续元素的位置，可能导致
元素重叠或布局错乱。
解决浮动带来的影响：
1. 清除浮动
在浮动元素的父元素或浮动元素后面添加一个空元素，并清除浮动。
.clearfix::after {
content: "";
display: table;
clear: both;
}
2. 使用 overflow: hidden
在浮动元素的父元素中添加 overflow: hidden; ，可以清除浮动并使父元素包裹浮动元素。
.parent {
overflow: hidden;
}
3. 使用Flexbox布局
使用Flexbox布局可以更好地控制元素的布局，避免使用浮动带来的问题。
.parent {
display: flex;
}