浮动是什么？为什么需要清除浮动？

5 min read

浮动是CSS中常见的一种布局方式，当元素设置了浮动属性后，它会从正常文档流中脱离出来，然后向左或向右移动，直到碰到其它的浮动元素或者容器的边缘停止移动。浮动可以用来实现多列布局和文字环绕图片等效果。

清除浮动是指清除浮动元素所产生的影响，使得后面的元素能够正常布局。有时候浮动元素会导致父元素的高度塌陷，或者与其它元素重叠，这时候就需要清除浮动。

需要清除浮动的情况包括：

  • 父元素没有设置高度，子元素浮动造成父元素高度塌陷
  • 浮动元素后面的元素或者容器造成布局混乱或者重叠

常见的清除浮动方式包括：

  • 使用空标签清除浮动 <div style="clear:both;"></div>
  • 设置父元素的overflow属性为auto或hidden
  • 使用clearfix类清除浮动（可以在CSS中定义），例如：
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}

上面的代码中，使用了一个特殊的伪元素:after来清除浮动，通过将伪元素设置为块级元素，再使用clear属性清除浮动，最后将伪元素隐藏，达到清除浮动的效果。同时，这个类也可以通过将元素的display属性设置为inline-block使其与浮动元素同行。