前端

CSS学习（一）：清除浮动

CSS中float属性一开始是用来实现文字围绕图片的效果，后来慢慢被用来实现多栏布局，float属性是实现多栏布局的常用实现，因为它对浏览器的兼容性好。如今，随着CSS3的支持，我们有更好的解决方案来实现多栏布局，比如flexbox。了解flexbox的更多知识，推荐阅读阮老师的文章Flex 布局教程：语法篇。

为什么要清除

在CSS中，一共有三种定位机制：普通流(normal flow)、浮动(float)和绝对定位(absolute positioning)。HTML文档元素一般就是普通流，当我们对某一个元素使用float属性后，它就脱离了普通流，定位方式变成了浮动，当元素浮动之后，不会影响到块级元素的布局而只会影响行内元素（比如文本）的排列。文档中的普通流就会表现得如同浮动元素不存在一样，当浮动元素高度超出包含元素的时候，就会出现包含元素不会自动伸高来闭合浮动元素，浮动元素无法撑起包含元素，也就是“高度塌陷”现象。高度塌陷对布局来讲是致命的，我们才不写bug，为了修复，我们就需要清除浮动，把浮动元素给闭合了，不影响其他元素的布局。

清除浮动

父元素使用overflow: auto

这是在现代浏览器中最简单清除浮动的方式，overflow属性真正用途是用来指定当内容溢出其包含元素时的处理方式，它还有一个作用，可以迫使父元素包含浮动的子元素。使用overflow属性的值hidden也可以用来清除浮动，但是，它会剪切超出包含元素的部分。

使用::after伪元素

1
2
3
4
5
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

使用::after伪元素添加了一个非浮动元素，使用clear属性来清除浮动，并且这个非浮动元素是不显示的，不影响布局。使用方法的话，只需要在需要清除浮动的元素中添加这个类名clearfix。

父元素同时浮动

如题，同时浮动父元素，父元素浮动后，不管其子元素是否浮动，它都会紧紧地包围住其子元素。其原理是因为浮动的特性，自己可以试试看，显示边框，元素浮动后，它会收缩变得紧凑，紧紧包裹子元素。

其他方法

清除浮动还有下面的一些方法，不过它仅仅是可以做到清除浮动，不够理想，都有或多或少的缺陷，比如破坏HTML的语义性。

  • 在浮动元素末尾添加一个空的标签例如<div style="clear:both"></div>
  • 使用 br标签<br clear="all" />

参考资料