CSS之使用clearfix清除浮动


直接copy下bootstrap里面的写法:

.clearfix {   *zoom: 1; }
.clearfix:before, .clearfix:after {   display: table;   line-height: 0;   content: ""; }  
.clearfix:after {   clear: both; }

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

看到”闲聊CSS之关于clearfix–清除浮动“:

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

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


热门文章

  • 体育总局冬运中心关于公示第十四届全国冬季运动会雪橇项目参赛运动员名单的函
  • 体育总局冬运中心关于2023年度冰雪项目优秀体校评选结果公示的通知
  • “十四冬”赛程1.0版发布
  • 滑雪场的雪道如何分等级
  • 2023-2024赛季全国自由式滑雪障碍追逐锦标赛暨十四冬资格赛竞赛规程
  • 2023-2024赛季全国单板滑雪障碍追逐锦标赛暨十四冬资格赛竞赛规程
  • 体育总局冬运中心关于公布第十四届全国冬季运动会雪车、钢架雪车项目参赛运动员名单的函
  • 体育总局冬运中心关于发布跳台滑雪裁判员培训班的通知
  • 体育总局冬运中心关于公布第十四届全国冬季运动会雪车、钢架雪车项目参赛运动员名单的函
  • 体育总局冬运中心关于发布2023-2024赛季全国自由式及单板滑雪U型场地锦标赛暨第十四届全国冬季运动会资格赛竞赛规程的通知
  • 体育总局冬运中心关于发布2023-2024赛季全国自由式及单板滑雪大跳台和坡面障碍技巧锦标赛暨第十四届全国冬季运动会资格赛竞赛规程的通知
  • 2023-2024赛季全国高山滑雪锦标赛暨十四冬资格赛竞赛规程
  • 2023-2024赛季全国自由式滑雪雪上技巧锦标赛暨“十四冬”资格赛竞赛规程
  • 体育总局冬运中心关于发布2023-2024赛季全国高山滑雪青少年锦标赛竞赛规程的通知
  • 体育总局冬运中心关于发布2023-2024赛季全国单板滑雪平行项目(平行回转、平行大回转)青少年锦标赛竞赛规程的通知