在CSS布局中，float属性用于控制元素向左侧或右侧浮动，让后续内容可以环绕浮动元素排列，是早期实现多栏布局、图文混排的常用手段。不过浮动元素会脱离常规文档流，若使用不当很容易引发布局异常，因此掌握浮动的使用方法与清除浮动的技巧是前端开发者的必备技能。
float属性的基本用法
float属性有三个常用取值，分别是left、right和none，默认值为none。当给元素设置float为left或right时，元素会向对应的方向浮动，直到碰到父元素的边界或者另一个浮动元素为止。
来看一个基础的浮动示例，下面的代码实现了两个div元素向左浮动并排排列的效果：
/* 基础浮动样式 */
.left-float {
float: left;
width: 200px;
height: 100px;
background-color: #f0f0f0;
margin-right: 10px;
}
对应的HTML结构如下：
<div class="left-float">浮动元素1</div> <div class="left-float">浮动元素2</div>
浮动带来的常见问题
浮动元素脱离文档流后，会导致两个典型问题：一是父元素无法感知浮动元素的高度，出现高度塌陷，背景、边框等样式无法正常显示；二是后续的非浮动元素会占据浮动元素原本的位置，出现布局错乱。
下面的代码就展示了父元素高度塌陷的问题：
<style>
.parent {
width: 500px;
border: 2px solid #333;
/* 父元素没有设置固定高度 */
}
.child {
float: left;
width: 200px;
height: 150px;
background-color: #e8f4ff;
}
</style>
<div class="parent">
<div class="child">浮动子元素</div>
</div>
此时父元素的边框只会显示为一条线，因为父元素计算高度时没有包含浮动的子元素。
清除浮动的常用技巧
清除浮动的核心目的是让父元素能够感知浮动子元素的高度，或者让后续元素不受浮动元素的影响，以下是几种常用的清除浮动方法。
1. 额外标签法
在最后一个浮动元素的后面添加一个空的块级标签，给这个标签设置clear: both样式，clear属性用于指定元素的哪一侧不允许出现浮动元素，both表示两侧都不允许。
<style>
.clear-fix {
clear: both;
}
</style>
<div class="parent">
<div class="child">浮动子元素</div>
<div class="clear-fix"></div>
</div>
这种方法的优点是简单易懂，兼容性好，缺点是会添加无意义的空标签，不符合语义化要求。
2. overflow属性法
给父元素设置overflow: hidden或者overflow: auto，可以触发父元素的BFC（块级格式化上下文），BFC内部的浮动元素会被计算高度，从而解决父元素高度塌陷的问题。
.parent {
width: 500px;
border: 2px solid #333;
overflow: hidden; /* 触发BFC，清除内部浮动 */
}
这种方法代码简洁，不需要额外添加标签，但是如果父元素内部有超出边界的内容，会被隐藏或者出现滚动条，需要根据实际场景选择。
3. 伪元素清除法
这是目前最常用的清除浮动方法，通过给父元素添加伪元素::after，在父元素的内容后面插入一个隐藏的块级元素，设置clear属性清除浮动，不需要修改HTML结构。
/* 通用清除浮动类 */
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* 兼容IE6、IE7 */
.clearfix {
*zoom: 1;
}
使用时只需要给父元素添加clearfix类即可：
<div class="parent clearfix">
<div class="child">浮动子元素</div>
</div>
这种方法符合语义化要求，兼容性好，是目前项目中最推荐的清除浮动方案。
clear属性的其他取值
除了clear: both，clear属性还有left和right两个取值，分别表示清除左侧浮动和清除右侧浮动，实际开发中both的使用频率最高，因为可以同时处理左右两侧的浮动影响。
| 取值 | 说明 |
|---|---|
| left | 元素左侧不允许出现浮动元素 |
| right | 元素右侧不允许出现浮动元素 |
| both | 元素左右两侧都不允许出现浮动元素 |
| none | 默认值，不清除浮动 |
使用浮动的注意事项
- 浮动元素会生成块级框，即使元素本身是行内元素，设置浮动后也会变成块级元素
- 如果浮动元素后面还有非浮动元素，非浮动元素会自动环绕浮动元素排列，除非手动清除浮动
- 现代布局中更推荐使用flex或者grid布局实现多栏效果，浮动更适合图文混排等特定场景