CSS定位布局——浮动与清除浮动

浮动（Float）是一种CSS布局属性，通常用于将元素向左或向右移动，使其脱离文档流并环绕在其周围的内容周围。浮动元素会影响其周围元素的布局，可能会导致父元素高度塌陷（父元素无法包裹浮动元素）或元素重叠等问题。

浮动后的特点：

• 元素脱离文档流，向左或向右移动，其他内容会环绕在其周围。
• 浮动元素不再占据文档流中的位置，可能会导致父元素高度塌陷。
• 浮动元素会影响其后续元素的位置，可能导致元素重叠或布局错乱。

解决浮动带来的影响：

1. 清除浮动

在浮动元素的父元素或浮动元素后面添加一个空元素，并清除浮动。

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

2. 使用 overflow: hidden

在浮动元素的父元素中添加 overflow: hidden; ，可以清除浮动并使父元素包裹浮动元素。

.parent {
    overflow: hidden;
}

3. 使用Flexbox布局

使用Flexbox布局可以更好地控制元素的布局，避免使用浮动带来的问题。

.parent {
    display: flex;
}