在CSS中，float属性用于让元素脱离正常的文档流，向左或向右移动，直到碰到包含块的边缘或者另一个浮动元素为止，常见的应用场景包括多列布局、图文混排等。浮动元素会脱离标准文档流，但是不会脱离文本流，后续的非浮动元素会围绕浮动元素排列。
float属性的常用取值
float属性有四个可选值，其中最常用的是left和right，具体含义如下：
- left：元素向左浮动
- right：元素向右浮动
- none：默认值，元素不浮动，保持在正常文档流中
- inherit：继承父元素的float属性值
float浮动元素的基础使用示例
我们可以通过一个简单的多列布局示例来看float的使用效果，以下代码实现了两个并排的浮动盒子：
/* 容器样式 */
.container {
width: 800px;
border: 1px solid #ccc;
padding: 10px;
}
/* 左浮动盒子 */
.left-box {
float: left;
width: 300px;
height: 200px;
background-color: #f0f0f0;
margin-right: 20px;
}
/* 右浮动盒子 */
.right-box {
float: right;
width: 460px;
height: 200px;
background-color: #e0e0e0;
}
<div class="container">
<div class="left-box">左侧浮动区域</div>
<div class="right-box">右侧浮动区域</div>
</div>
上述代码中，两个子元素分别设置了左浮动和右浮动，会脱离正常文档流并排排列，父容器如果没有额外处理，会出现高度塌陷的问题，因为浮动元素不会撑开父容器的高度。
浮动元素的特性说明
使用float浮动元素时，需要了解它的几个核心特性：
- 浮动元素会脱离标准文档流，后续的非浮动元素会忽略浮动元素的位置，占据浮动元素原本的空间，但是文本内容会围绕浮动元素排列
- 多个浮动元素会按照设置的方向依次排列，如果一行放不下，会自动换行到下一行
- 浮动元素的顶部不会超过包含块的顶部，也不会超过之前浮动元素的顶部
- 行内元素设置浮动后会变成块级元素，可以设置宽高
清除浮动的方法
因为浮动元素会导致父容器高度塌陷、后续元素布局错乱等问题，所以实际开发中需要清除浮动的影响，常见的清除浮动方法有以下几种：
1. 使用clear属性
clear属性用于指定元素的哪一侧不允许有浮动元素，取值包括left、right、both、none，最常用的就是both，表示两侧都不允许有浮动元素。我们可以在浮动元素后面添加一个空的块级元素，设置clear:both：
.clear-fix {
clear: both;
}
<div class="container">
<div class="left-box">左侧浮动区域</div>
<div class="right-box">右侧浮动区域</div>
<div class="clear-fix"></div>
</div>
2. 使用伪元素清除浮动
这种方式不需要添加额外的空标签，是实际开发中最常用的清除浮动方法，通过给父容器添加伪元素after实现：
.container::after {
content: "";
display: block;
clear: both;
}
设置伪元素为块级元素，内容为空，然后清除两侧浮动，就可以让父容器重新获取浮动元素的高度，解决高度塌陷问题。
3. 触发BFC清除浮动
给父容器设置一些可以触发BFC（块级格式化上下文）的属性，也能清除浮动影响，比如设置overflow: hidden、overflow: auto，或者设置display: flow-root，这些方法会让父容器包裹住内部的浮动元素：
.container {
width: 800px;
border: 1px solid #ccc;
padding: 10px;
overflow: hidden; /* 触发BFC，清除浮动 */
}
使用float的注意事项
在使用float浮动元素时，还需要注意以下几点：
- 不要过度使用浮动布局，现在flex、grid布局更适合复杂的页面布局，float更适合图文环绕等特定场景
- 浮动元素设置margin时，不会出现外边距合并的问题
- 如果父容器没有设置高度，且内部只有浮动元素，一定要记得清除浮动，否则父容器高度为0，会影响后续布局