首页 > Web开发 > 详细

CSS-BFC

时间:2014-10-14 00:10:38      阅读:360      评论:0      收藏:0      [点我收藏+]

最近看幕课网CSS之Float,float最初是为了实现文字的环绕效果;这里面提到BFC,刚好项目中正用到一种解决BFC的方法,DIV在添加float后,就不存在文档流中啦,不占据空间,这使的一些未浮动的DIV会出现一些奇怪的布局,像塌陷,这里

形成BFC的条件(符合以下任一条件即可): 

1) float的值不为none;

2)overflow的值不为visible;

3)display的值为 table-cell、table-caption和inline-block之一;

4)position的值不为 static或relative中的任何一个;

我觉的正是DIV浮动起来了,才比以前的table布局更加灵活,最简单清除浮动的方式是添加一个新的DIV,附上clear:both,这样会产生一些对于以后不易维护的代码,继而出现利用after,before伪类+content/zoom来清楚浮动,目前项目解决方法就是这个,具体代码:

xxx.after{
   display:block;
   clear:both;
   height:0;
   font-size:0;
   content:"";
   zoom:1
}

大师手法:

bubuko.com,布布扣
xxx:after{
    content:"";
    display:table;
    clear:both;
}
View Code

这边跟BFC还有个类似的叫hasLayout,抽空看看博文再做记录。

CSS-BFC

原文:http://www.cnblogs.com/zoujking/p/4023290.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!