css浮动是前端布局中常用的技术，主要通过float属性实现元素脱离普通文档流并向左或向右横向排列，常用来实现多列布局、图文环绕等效果，下面详细介绍css浮动的具体实现方法和相关注意事项。
一、css浮动的核心方法：使用float属性
css浮动的基础实现方式是给目标元素设置float属性，该属性有以下几个常用取值：
- left：元素向左浮动，会尽可能靠左排列，直到碰到父元素的左边缘或者其他浮动元素的右边缘
- right：元素向右浮动，会尽可能靠右排列，直到碰到父元素的右边缘或者其他浮动元素的左边缘
- none：默认值，元素不浮动，保持在普通文档流中
- inherit：继承父元素的float属性值
下面是一个简单的浮动示例，实现两个div横向排列：
/* 基础样式 */
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
margin: 10px;
}
/* 给两个盒子设置左浮动 */
.left-float {
float: left;
}
.right-float {
float: left;
}
<div class="container">
<div class="box left-float">左浮动元素</div>
<div class="box right-float">右浮动元素</div>
</div>
二、浮动带来的问题：高度塌陷
当父元素没有设置固定高度，且内部子元素全部浮动时，子元素会脱离普通文档流，导致父元素无法感知子元素的高度，出现高度塌陷问题，父元素高度会变为0，影响后续元素的布局。
比如下面的代码就会出现高度塌陷：
.container {
border: 2px solid #333;
/* 父元素没有固定高度 */
}
.float-item {
width: 150px;
height: 150px;
float: left;
margin: 10px;
background-color: #e6f7ff;
}
<div class="container">
<div class="float-item">浮动子元素1</div>
<div class="float-item">浮动子元素2</div>
</div>
<div class="next">后续内容</div>
三、清除浮动的方法
为了解决浮动带来的高度塌陷等问题，需要使用清除浮动的方法，常用的清除浮动方式有以下几种：
1. 使用clear属性
clear属性用于指定元素哪一侧不允许出现浮动元素，常用取值为left、right、both，在父元素内部最后添加一个空的块级元素，设置clear: both即可清除浮动。
.clear-fix {
clear: both;
}
<div class="container">
<div class="float-item">浮动子元素1</div>
<div class="float-item">浮动子元素2</div>
<div class="clear-fix"></div>
</div>
2. 使用伪元素清除浮动
为了避免添加无意义的空标签，可以给父元素设置伪元素after来清除浮动，这是目前最常用的清除浮动方式。
/* 通用清除浮动类 */
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* 兼容IE低版本 */
.clearfix {
*zoom: 1;
}
<div class="container clearfix">
<div class="float-item">浮动子元素1</div>
<div class="float-item">浮动子元素2</div>
</div>
3. 触发BFC清除浮动
触发父元素的BFC（块级格式化上下文）也可以清除浮动，因为BFC内部的浮动元素会被BFC容器计算高度。常见的触发BFC的方式有给父元素设置overflow: hidden、overflow: auto、display: flow-root等。
.container {
border: 2px solid #333;
/* 触发BFC清除浮动 */
overflow: hidden;
}
四、浮动的使用注意事项
- 浮动元素会脱离普通文档流，不会撑开父元素高度，使用时需要注意清除浮动
- 浮动元素会覆盖普通文档流中的元素，但是不会覆盖文字内容，这也是图文环绕效果的实现原理
- 如果父元素宽度不够容纳所有浮动元素，后面的浮动元素会自动换行排列
- 浮动元素的display属性会被隐式转换为block，即使之前设置的是inline也会变为块级元素
注意：现代布局中flex和grid布局已经逐渐替代浮动成为多列布局的主流方案，但是在维护老项目或者实现简单的图文环绕效果时，浮动仍然是非常实用的技术。