my blog my blog

Tag: clearfix
CSS之使用clearfix清除浮动

 

好多东西,现用现学现查,然后记录下来,这几年都是这样子。看过很多东西,但是未必都记住了,有点儿印象,然后需要的时候再现学。今天分享下clearfix。

首先,奶牛直接copy下bootstrap里面的写法:

  1. .clearfix { 
  2.   *zoom: 1
  3.  
  4. .clearfix:before, 
  5. .clearfix:after { 
  6.   display: table; 
  7.   line-height0
  8.   content""
  9.  
  10. .clearfix:after { 
  11.   clearboth

在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹,可以保证外部div的height,即清除"浮动元素脱离了文档流,包围图片和文本的 div 不占据空间"的问题。

看到”闲聊CSS之关于clearfix–清除浮动“ (http://www.indievox.com/e2ghost/post/50238)的文章给了一个比较清晰的分析:

  1. 构成Block Formatting Context的方法有下面几种: 
  2.  
  3.     float的值不为none。 
  4.     overflow的值不为visible。 
  5.     display的值为table-cell, table-caption, inline-block中的任何一个。 
  6.     position的值不为relative和static。 
  7.  
  8. 很明显,float和position不合适我们的需求。那只能从overflow或者display中选取一个。
  9. 因为是应用了.clearfix和.menu的菜单极有可能是多级的,所以overflow: hidden或overflow: auto也不满足需求
  10. (会把下拉的菜单隐藏掉或者出滚动条),那么只能从display下手。 
  11.  
  12. 我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个
  13. 但是display: inline-block会产生多余空白,所以也排除掉。
  14. 剩下的只有table-cell, table-caption,为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context
  15. 因为display: table会产生一些匿名盒子,这些匿名盒子的其中一个(display值为table-cell)会形成Block Formatting Context。
  16. 这样我们新的.clearfix就会闭合内部元素的浮动。 

这就是为什么选择display:table的原因。