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 自动计算浮动高度从根源解决塌陷。方案5flex 替代浮动现代首选现代布局彻底抛弃浮动全部使用 Flex/Grid无塌陷问题。 浮动（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 自动计算浮动高度从根源解决塌陷。方案5flex 替代浮动现代首选现代布局彻底抛弃浮动全部使用 Flex/Grid无塌陷问题。