浮动（float）原理、清除浮动 5 种方法总结

1. 浮动原理

float: left/right/none

浮动元素脱离标准文档流，向左/向右停靠，实现横向并排布局。

浮动副作用：父级高度塌陷、后续元素上浮、布局错乱。

2. 五种清除浮动方案

方案1：额外空 div（最简单、不推荐）

浮动末尾加空标签，设置 clear: both；缺点：冗余无意义标签。

方案2：伪类清除浮动（项目常用）

.clearfix::after{
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix{
*zoom: 1; /* 兼容IE */
}

方案3：父级 overflow:hidden

父元素设置 overflow:hidden；简单快捷，缺点：溢出内容会被裁剪。

方案4：父级开启 BFC

通过触发 BFC 自动计算浮动高度，从根源解决塌陷。

方案5：flex 替代浮动（现代首选）

现代布局彻底抛弃浮动，全部使用 Flex/Grid，无塌陷问题。