CSS-BFC

浏览数：27 / 时间：2015年06月09日

最近看幕课网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，抽空看看博文再做记录。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 src com log 方法 http si class style 代码 src com log 方法 http si

相关文章

随机文章

您可能还喜欢

您可能还喜欢