CSS学习（一）：清除浮动

CSS中float属性一开始是用来实现文字围绕图片的效果，后来慢慢被用来实现多栏布局，float属性是实现多栏布局的常用实现，因为它对浏览器的兼容性好。如今，随着CSS3的支持，我们有更好的解决方案来实现多栏布局，比如flexbox。

为什么要清除

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

清除浮动

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

2. 使用::after伪元素

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

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

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

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

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

---

参考资料

• 如何理解 CSS 中的浮动布局方式？
• What methods of ‘clearfix’ can I use?

本文永久链接：https://dukeluo.me/2018/05/13/css-clearfix.html