首页 > 代码库 > 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;}
View Code

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

CSS-BFC