CSS之浮动

Float的特征

  1. 块在一行显示;
  2. 内联支持宽高;
  3. 默认内容撑开宽度;
  4. 脱离文档流;
  5. 提升层级半层

为什么要清除浮动

因为浮动具有很强的破坏性。

清除浮动的方法

  1. 加高:给父级元素添加高度便可以包住浮动元素;
    【缺点】扩展性不好,当父级高度不固定时就用不了这个方法了。

  2. 给父级也加上浮动;
    【缺点】所有元素都浮动,margin左右失效!

  3. 把父级变成inline-block;
    【缺点】问题同上。

  4. 空标签清除浮动:给一个空标签加上样式:clear:both;
    【缺点】IE6有最小高度19px偏差。

  5. .br清除浮动:在浮动元素后面加上:<br clear="all" />
    【缺点】不符合W3C标准。

  6. after伪类清除浮动:
  • 非IE6下:

  • 在IE6下还需要加上:
.clearfix{
    *zoom:1;
}
  1. overflow:hidden清除浮动;
    【问题】当页面上那些分享条啊返回顶部条啊和某个浮动元素一起被放到一个父元素里面时,如果我们使用这个方法,那么分享条超出父元素范围将不可见!

综上所述,使用after伪类清除浮动最优雅!无任何副作用!

BFC和haslayout

全部评论

相关推荐

醉蟀:你不干有的是人干
点赞 评论 收藏
分享
风中翠竹:真的真的真的没有kpi。。。面试官是没有任何kpi的,捞是真的想试试看这个行不行,碰碰运气,或者是面试官比较闲现在,没事捞个人看看。kpi算HR那边,但是只有你入职了,kpi才作数,面试是没有的。
双非有机会进大厂吗
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务