CSS之使用clearfix清除浮动
2016-02-19 14:43
405 查看
.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–清除浮动“ (http://www.indievox.com/e2ghost/post/50238)的文章给了一个比较清晰的分析:
构成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的原因。
相关文章推荐
- CSS3中animation属性的使用
- 铁路样式sld
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- css3中div的水平,垂直居中
- servlet跳转到jsp页面,jsp样式失效怎么解决!
- Css3学习笔记
- CSS3 calc() 会计算的属性
- CSS3选择器(全)
- CSS3用户界面
- CSS3中的网页布局
- CSS3中的2D变形
- CSS文本、字体与颜色
- CSS新增特性和CSS选择器
- 14.使用 CSS 显示 XML
- CSS发展史
- css srpites css精灵
- CSS清除浮动_清除float浮动
- CSS中DIV居中
- 未知宽高图片垂直居中&&CSS垂直居中总结
- css中inline、block、inline-block的区别