在CSS布局中，float浮动属性常被用来实现多列排列、图文环绕等效果，但浮动元素会脱离文档流，导致父元素无法感知其高度，进而出现父元素高度塌陷、后续非浮动元素位置偏移等布局错乱问题，此时就需要通过清除浮动来修复这些问题。
浮动导致布局错乱的常见表现
当父元素内部的所有子元素都设置了浮动时，父元素的高度会变为0，同时父元素后面的普通文档流元素会向上移动，占据原本父元素的位置，造成布局重叠或者错位。比如下面的代码就会出现这类问题：
<div class="parent"> <div class="child">浮动子元素1</div> <div class="child">浮动子元素2</div> </div> <div class="next">后续元素</div>
.parent {
border: 1px solid #333;
}
.child {
float: left;
width: 100px;
height: 100px;
background: #f0f0f0;
margin-right: 10px;
}
.next {
background: #ccc;
height: 50px;
}
上述代码中，parent元素没有设置高度，内部两个child元素都浮动，最终parent的边框只会显示一条线，next元素会跑到parent的边框内部，出现布局错乱。
清除浮动的常用方法
1. 使用clear属性清除浮动
clear属性用来指定元素哪一侧不允许出现浮动元素，可选值有left、right、both、none，清除浮动最常用的是clear: both。可以在浮动元素后面添加一个空的块级元素，给这个元素设置clear属性，让这个元素移动到浮动元素下方，从而撑开父元素的高度。
/* 在parent内部的最后添加一个空的div，类名为clear */
.clear {
clear: both;
}
这种方法的缺点是会额外添加无意义的HTML标签，不符合语义化要求，现在很少使用。
2. clearfix伪元素清除浮动
这是目前最主流的清除浮动方案，不需要额外添加HTML标签，通过父元素的伪元素::after来实现清除浮动的效果。原理是在父元素的末尾生成一个看不见的块级元素，给这个伪元素设置clear属性，从而撑开父元素高度。
/* 给需要清除浮动的父元素添加clearfix类 */
.clearfix::after {
content: "";
display: block;
clear: both;
/* 以下属性是为了兼容旧版本浏览器，避免伪元素生成额外的空间 */
height: 0;
visibility: hidden;
}
/* 兼容IE6、IE7，触发hasLayout */
.clearfix {
*zoom: 1;
}
使用时只需要给父元素添加clearfix类即可，比如前面的parent元素添加这个类后，就能正常撑开高度，避免布局错乱。
3. 触发BFC清除浮动
BFC（块级格式化上下文）是页面上的一个独立渲染区域，内部的元素不会影响外部的元素，浮动元素也会被BFC区域感知到高度。给父元素设置一些触发BFC的属性，就能让父元素包含内部的浮动元素，从而避免高度塌陷。
常见的触发BFC的属性有：
- overflow: hidden / auto / scroll（非visible即可）
- float: left / right（父元素本身也浮动）
- display: inline-block / flex / grid
- position: absolute / fixed
比如给前面的parent元素添加overflow: hidden属性：
.parent {
border: 1px solid #333;
overflow: hidden;
}
这种方法实现简单，但可能会带来一些副作用，比如overflow: hidden会裁剪超出父元素的内容，需要根据实际场景选择使用。
不同清除浮动方案的选择建议
如果是通用的布局场景，优先选择clearfix伪元素方案，没有副作用且兼容性好；如果父元素本身就需要设置overflow属性，或者需要触发BFC来实现其他布局效果，可以选择触发BFC的方案；不建议使用空标签加clear的方案，避免增加无意义的HTML结构。
在实际开发中，只要出现浮动元素导致父元素高度塌陷或者后续元素布局异常的情况，就可以根据实际情况选择合适的清除浮动方法，快速修复布局错乱问题。