码迷,mamicode.com
首页 > 其他好文 > 详细

清除浮动

时间:2016-11-15 08:05:53      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:float   tab   apt   新浪   上下文   clear   mat   pre   覆盖   

单伪元素:after (网易、新浪在用)

afterj就是会在这个盒子的最后面生成一个内容:“”
`.clearfix:after{
   content:"";
   height:0;
   visibility:hidden;
   overflow:hidden;
   display:block;
   clear:both;  
}
.clearfix{
  zoom:1;
}

`

双伪元素:before :after(淘宝,小米)

`.clearfix:before,.clearfix:after{
   content:"";
   display:table;
}
.clearfix:after{
   clear:both;
}
.clearfix{
   *zoom:1;
}`

overflow:hidden

bfc:BFC block formatting content 格式化上下文 是w3c规定的一种独立渲染区域

BFC有什么特点:
BFC会阻止外边距折叠
BFC可以承载浮动的元素
BFC可以阻止元素被浮动元素覆盖

什么时候触发bfc:
float除了none以外的值
overflow除了visible以外的值(hidden,auto,scroll)
display(table-cell,table-caption,inline-block)
position(absolute,fixed)

清除浮动

标签:float   tab   apt   新浪   上下文   clear   mat   pre   覆盖   

原文地址:http://www.cnblogs.com/xzq1992/p/6064148.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!