浮动（Float）
浮动是一种用于将元素从普通流中移除并将其放置在包含块的左侧或右侧的机制。它常用于创建多列布局或使文本环绕图像等场景。
属性值
float: left;：元素向左浮动。float: right;：元素向右浮动。`float: none;（默认值）：元素不浮动。`
特点
- 脱离普通流：浮动元素不再占据原来的空间，后续元素会尝试填充其留下的空白。
- 与其他元素重叠：如果页面宽度不足，浮动元素可能会与相邻元素重叠。
- 文本环绕：非浮动元素中的文本会环绕浮动元素。
-
Float left
就像小朋友向左排队。
-
Float right
就像小朋友向右排队，前边的元素会显示在右边（这里会改变元素的显示顺序）。
清除浮动
-
Q: 为什么要清楚浮动?
A: 浮动元素脱离文档流后，会导致父元素的高度塌陷，因此需要清除浮动。
-
Q:不清楚浮动有什么后果
A:浮动元素可能会与相邻元素重叠，因此需要合理设置宽度和间距。
-
Q:如何清楚浮动
A:清除浮动的方法有很多种，这里以清除浮动为例进行讲解。
清除浮动的方法
1.额外的HTML元素
在浮动元素后添加一个空的块级元素，并设置其样式为 clear: both;。
代码示例：
<style>
.float-left{
float: left;
}
.float-right{
float: right;
}
</style>
<div class="container">
<div class="float-left">左浮动</div>
<div class="float-right">右浮动</div>
<div style="clear: both;"></div>
</div>
2.使用伪元素
通过在父元素上使用伪元素 ::after 来清除浮动。
代码示例：
<style>
.container::after {
content: "";
display: table;
clear: both;
}
.float-left{
float: left;
}
.float-right{
float: right;
}
</style>
<div class="container">
<div class="float-left">左浮动</div>
<div class="float-right">右浮动</div>
</div>
3.使用 overflow 属性
设置父元素的 overflow 属性为 hidden 或 auto。
代码示例：
<style>
.container {
overflow: hidden;
}
.float-left{
float: left;
}
.float-right{
float: right;
}
</style>
<div class="container">
<div class="float-left">左浮动</div>
<div class="float-right">右浮动</div>
</div>
4.使用 display 属性
设置父元素的 display 属性为 flow-root。
代码示例：
<style>
.container {
display: flow-root;
}
.float-left{
float: left;
}
.float-right{
float: right;
}
</style>
<div class="container">
<div class="float-left">左浮动</div>
<div class="float-right">右浮动</div>
</div>
清除浮动的方法对比
| 方法 | 优点 | 缺点 |
|---|---|---|
| 额外的HTML元素 | 实现简单 | 增加不必要的HTML结构 |
| 伪元素 | 不增加额外的HTML结构 | 兼容性较好，但需要额外的CSS代码 |
| overflow 属性 | 不增加额外的HTML结构和CSS代码 | 可能导致内容被裁剪 |
| display 属性 | 不增加额外的HTML结构和CSS代码 | 兼容性不如其他方法 |
浮动（Float）与文本对齐（text-align）的对比
| 方法 | 用途 | 优点 | 缺点 |
|---|---|---|---|
| 浮动（Float） | 主要用于布局，将元素向左或向右浮动。 | 实现多列布局简单。 | 可能导致父元素高度塌陷，需要清除浮动。 |
| 文本对齐（text-align） | 主要用于文本内容的水平对齐，如居中、左对齐、右对齐等。 | 实现文本对齐简单，不影响布局。 | 不能用于布局，无法实现元素的浮动效果。 |
