在css布局中，浮动是最早用于实现多列排版、图文环绕效果的特性，但使用浮动后经常会出现父元素高度塌陷、后续元素位置偏移的问题，需要额外做清除浮动处理，这背后的原因和浮动的设计机制以及文档流规则直接相关。
浮动的基本特性
css中的float属性最初是为了实现文字环绕图片的效果设计的，可选值有left、right、none。当一个元素设置了浮动后，它会脱离标准文档流，向左或者向右移动，直到碰到父容器的边缘或者其他浮动元素的边缘才会停止。
脱离标准文档流意味着浮动元素不再占据原来在文档流中的位置，父容器在计算自身高度时，不会把浮动元素的高度算进去，这就是后续出现各种布局问题的核心原因。
浮动引发的问题场景
最常见的浮动问题就是父元素高度塌陷，我们可以通过一段简单的代码来复现这个问题：
/* 父元素不设置高度，子元素设置浮动 */
.parent {
width: 500px;
border: 1px solid #333;
background-color: #f5f5f5;
}
.child {
float: left;
width: 200px;
height: 150px;
background-color: #4caf50;
margin: 10px;
}
<div class="parent">
<div class="child">浮动子元素</div>
<div class="child">浮动子元素</div>
</div>
运行上面的代码会发现，父元素的边框会收缩成一条线，高度为0，因为两个子元素都脱离了文档流，父元素无法感知到它们的高度。如果父元素后面还有其他元素，这些元素会直接跑到父元素的边框下面，和浮动元素重叠，导致布局完全错乱。
为什么需要清除浮动
清除浮动的本质就是解决浮动元素脱离文档流带来的副作用，让父元素能够正常包裹浮动子元素，同时让后续元素回到正确的文档流位置。如果没有清除浮动的操作，浮动的影响会一直传递到后续的所有元素，导致整个页面布局失控。
从css规范的设计来看，浮动本身是临时脱离文档流的特性，并不是用来做整体页面布局的首选方案，所以规范没有默认让父元素自动适应浮动子元素的高度，需要开发者根据实际需求手动处理，这就是清除浮动问题出现的根本原因。
常见的清除浮动思路
清除浮动的核心思路要么是让父元素重新感知浮动元素的高度，要么是让后续元素避开浮动元素的影响，常见的实现方式有以下几种：
- 给父元素设置固定高度，这种方式只适合子元素高度固定的场景，不够灵活。
- 在父元素内部最后添加一个空的块级元素，设置
clear:both属性，强制让这个元素左右都不允许有浮动元素，从而撑开父元素高度。 - 触发父元素的BFC（块级格式化上下文），比如给父元素设置
overflow:hidden、display:flow-root等属性，BFC容器会自动计算浮动子元素的高度。 - 使用伪元素清除浮动，这是目前最常用的方式，不需要额外添加冗余的html元素，代码如下：
/* 通用清除浮动类 */
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* 兼容IE低版本 */
.clearfix {
*zoom: 1;
}
给父元素加上clearfix类之后，父元素就能正常包裹浮动子元素，后续元素也不会受到浮动的影响，布局恢复正常。
总结
css出现清除浮动的问题，本质是浮动特性脱离标准文档流的设计导致的，浮动最初不是为了整体布局设计的，所以没有默认处理父元素高度和后续元素位置的问题。理解这个底层原因之后，我们就能更合理地选择清除浮动的方式，也能在布局时更谨慎地使用浮动特性，避免不必要的布局问题。