CSS-BFC

标签：style   blog   http   color   io   os   ar   for   sp   

最近看幕课网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

标签：style   blog   http   color   io   os   ar   for   sp   

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