CSS浮动是前端开发中常用的布局手段，通过float属性可以让元素脱离常规文档流向左或向右排列，实现文字环绕、多列布局等效果。但浮动元素脱离文档流的特性，也会带来一系列负作用，影响页面布局的正常表现。
父元素高度塌陷
当父元素内部的所有子元素都设置浮动后，这些子元素会脱离文档流，不再占据父元素的空间，导致父元素无法感知到子元素的高度，自身高度会塌陷为0。这是浮动最常见的负作用之一，会直接影响父元素后续兄弟元素的布局位置。
我们可以通过下面的代码看到这个问题：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.parent {
border: 2px solid #333;
width: 500px;
}
.child {
float: left;
width: 200px;
height: 150px;
background-color: #f0f0f0;
margin: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">浮动子元素1</div>
<div class="child">浮动子元素2</div>
</div>
<div style="width: 500px; height: 50px; background-color: #e8f4ff;">父元素下方的元素</div>
</body>
</html>
运行上述代码后，父元素的边框会收缩成一条线，高度几乎为0，下方的蓝色块会直接跑到父元素边框的上方，和浮动子元素重叠，这就是父元素高度塌陷的典型表现。
后续非浮动元素位置异常
浮动元素脱离文档流后，会漂浮在常规文档流的上方，后续的非浮动元素会忽略浮动元素的存在，按照常规文档流的规则排列，导致非浮动元素的内容被浮动元素遮挡，或者位置出现偏移。
下面的示例可以展示这个问题：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.float-box {
float: left;
width: 200px;
height: 200px;
background-color: #ffcccc;
}
.normal-box {
width: 300px;
height: 250px;
background-color: #ccffcc;
}
</style>
</head>
<body>
<div class="float-box">浮动元素</div>
<div class="normal-box">非浮动元素，内容会被浮动元素遮挡一部分</div>
</body>
</html>
运行代码后，绿色的非浮动元素会从页面左上角开始排列，其左上角区域会被红色的浮动元素覆盖，无法正常显示完整内容。
相邻浮动元素排列超出容器宽度时换行异常
当多个浮动元素依次排列，且它们的总宽度超过父容器的可用宽度时，后面的浮动元素会自动换行排列。但如果父容器没有设置合适的宽度，或者浮动元素的宽度计算存在偏差，就会出现换行不符合预期的情况，甚至导致布局错乱。
我们来看下面的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
width: 450px;
border: 1px solid #999;
padding: 10px;
}
.item {
float: left;
width: 200px;
height: 100px;
background-color: #f5f5f5;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">浮动项1</div>
<div class="item">浮动项2</div>
<div class="item">浮动项3</div>
</div>
</body>
</html>
这里每个浮动项宽度加外边距是210px，父容器可用宽度是450px，只能放下两个浮动项，第三个浮动项会换行。但如果父容器的宽度计算错误，或者浮动项存在边框、内边距等未纳入宽度计算的情况，就可能出现第三个浮动项卡在第二个浮动项旁边，超出父容器范围的问题。
文字环绕效果不符合预期
浮动最初的设计目的是实现文字环绕图片的效果，但如果使用不当，会出现文字环绕的范围超出预期，或者文字和浮动元素之间的间距不符合设计要求的负作用。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.img-float {
float: left;
width: 150px;
height: 150px;
background-color: #ddd;
margin-right: 10px;
}
.text {
width: 300px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="img-float">浮动图片</div>
<div class="text">
这是一段很长的测试文字，用来展示文字环绕浮动元素的效果。如果文字内容的高度超过浮动元素的高度，文字就会在浮动元素的下方继续排列，而不是一直保持在浮动元素的右侧，这可能会和设计预期不符。
</div>
</body>
</html>
运行代码后，当文字内容高度超过浮动元素的高度时，文字会延伸到浮动元素的下方，而不是始终在浮动元素右侧排列，这种效果如果不符合设计需求，就会成为需要处理的负作用。
如何规避浮动的负作用
针对浮动产生的各类负作用，开发者可以通过清除浮动、合理设置容器尺寸、使用现代布局方案等方式规避。比如给父元素设置overflow: hidden触发BFC，或者使用伪元素清除浮动，都可以解决父元素高度塌陷的问题。如果是新的项目，也可以优先考虑使用flex、grid等现代布局方案，减少对浮动的依赖，从根源上避免浮动带来的负作用。