css中如何清除float

什么是float

在CSS中，我们可以使用float属性使元素浮动起来，浮动的元素称之为浮动元素。浮动元素在文档流中会脱离其父元素，因此其下面的元素会自动向上移动，直到碰到父元素或者其它浮动元素为止。

.box {
  float: left;
}

float的使用场景

实现文字环绕图片效果

我们可以让图片浮动起来，并让文字环绕其周围，达到非常好看的效果。

img {
  float: left;
  margin-right: 20px;
}

实现两栏布局

我们可以让左栏浮动在左侧，右栏则通过设置margin-left或者position来占据左栏剩余的部分，从而实现两栏布局。

.left {
  float: left;
  width: 200px;
}
.right {
  margin-left: 220px;
}
或者
.right {
  position: absolute;
  left: 220px;
}

清除float

出现的问题

在使用float属性时，若其被应用于某一容器内的元素，容器往往会发生高度坍塌的情况。这是因为浮动元素脱离了文档流，所以容器的高度就不能够被正确计算。

  

    left content
  

  

    right content
  


.container {
  border: 1px solid #ddd;
  padding: 20px;
}
.left {
  float: left;
  width: 200px;
  background-color: #f5f5f5;
}
.right {
  float: left;
  width: 200px;
  background-color: #f5f5f5;
}

如上代码所示，左侧和右侧的div元素都被设置为浮动元素，并且被包含在了类名为container的元素之中，但是我们会发现，class为container的div并没有包含住左右两侧的内容，而是出现了高度坍塌的情况。

清除float的方法

使用clear属性

clear属性可以用于防止坍塌问题的出现。clear属性有两个常用的取值，一个是left，一个是right。left表示不希望左侧出现浮动元素，所以左侧的元素会自动下移；right表示不希望右侧出现浮动元素，所以右侧的元素会自动下移。

同时，还有一个比较特殊的取值为both，表示左右两侧都不能够出现浮动元素。

.container:after {
  content: '';
  display: block;
  clear: both;
}

我们可以添加一个伪元素:after来帮助我们清除浮动，这个方法非常实用，同时也是最为推荐的。

使用overflow属性

我们可以通过设置overflow属性为auto或者hidden来清除浮动。

.container {
  overflow: hidden;
}

通过设置overflow:hidden就可以让父容器自动扩展高度，从而防止出现高度坍塌的情况。但是这种方法有一个缺点，就是在外围有圆角的时候，会有部分内容被遮挡，所以在使用的时候需要注意。

总结

在CSS中使用float属性可以实现非常有趣的效果，但同时也会带来一些问题。为了防止浮动元素引起的高度坍塌问题，我们可以使用两种方法来清除浮动。其中，使用:after伪元素是最为推荐的做法。

感谢您的耐心阅读！