什么是浮动？
浮动是一种CSS布局技术，它能够让元素靠左或靠右移动，形成多列布局或者文本环绕图片的效果。浮动被广泛应用于页面布局中。
浮动带来的问题
使用浮动布局页面时，经常会遇到一些问题。比如，父元素高度无法被撑开，以及子元素溢出父元素等问题。这些问题都是由于子元素浮动引起的。因此，我们需要清除浮动。
清除浮动的方法
清除浮动有多种方法，以下是几种比较常用的方式：
使用clear属性
使用overflow属性
在父元素末尾添加一段空标签，并给予clear属性
使用伪元素:before和:after来清除浮动
clear属性
clear属性能够清除元素左侧或右侧的浮动影响。使用clear属性可以在父元素或兄弟元素中清除浮动：
.clearfix:after {
content: "";
display: block;
clear: both;
}
overflow属性
使用overflow属性也可以清除浮动。这是因为，浮动元素不参与父元素的高度计算，而overflow属性能够让父元素形成BFC（块级格式化上下文），从而包含其所有子元素。使用overflow属性可以在父元素中清除浮动：
.parent {
overflow: hidden;
}
空标签
在父元素末尾添加一个空标签也可以清除浮动。由于这种方法比较简单易懂，但是会增加页面的HTML代码量：
.clear {
clear: both;
height: 0;
font-size: 0;
line-height: 0;
}
伪元素
使用伪元素:before和:after来清除浮动也是一种常用的方法：
.parent {
position: relative;
}
.parent:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
清除浮动是CSS布局中必不可少的一步，它能够保证页面布局的稳定性。通过使用上述的清除浮动方法，我们可以避免出现一些常见的问题，并让页面布局更加完美。