首页 > 代码库 > CSS-BFC
CSS-BFC
最近看幕课网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}
大师手法:
xxx:after{ content:""; display:table; clear:both;}
这边跟BFC还有个类似的叫hasLayout,抽空看看博文再做记录。
CSS-BFC
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。