CSS中清除浮动的目的

什么是浮动？

浮动（float）是一种布局方式，它可以让元素脱离文档流，通过向左或向右浮动来使元素“覆盖”在其相邻元素的上面。

浮动带来的问题

浮动元素会脱离文档流，导致它的父元素的高度无法被撑开，从而可能导致父元素无法正确地包含浮动元素，导致样式混乱。

已有的清除浮动方法

1. 空标签清除浮动

可以在浮动元素的最后添加一个空标签，并用 clear 属性清除浮动。

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

2. 父元素使用 overflow:hidden 属性清除浮动

将父元素的 overflow 属性设置为 hidden，可以清除子元素的浮动，使父元素包含所有子元素并计算它们的高度。

parent {
    overflow: hidden;
}

3. 使用 clearfix hack 清除浮动

在父元素中应用 clearfix hack 类。

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1; /* 兼容 IE6/7 */
}

结论

浮动带来的问题在现代 CSS 布局技术中已经得到了完善的解决方案，以上介绍了三种常用的清除浮动方法，大家可以根据实际情况灵活使用。