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，抽空看看博文再做记录。

*******补充IE hasLayout*******只存在与IE7,IE6

hasLayout是IE渲染引擎的内部组成部分，一个元素计算自身内容大小，不是根据自身对自己组织和计算大小，就是依赖父元素来计算和组织;

大多IE下的显示错误，就是源于 haslayout。如果它设置成了true，它就不得不去渲染它自己，因此元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单词，如果haslayout没有被设置成true，那么元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方

它是布尔值，为true是既其拥有布局，通过ie developer toolbar 拥有 haslayout的元素，通常显示为“haslayout = -1”;

使其拥有布局方式:常用zoom:1

IE6:height:1% 切记不能设置overflow:visible；或用条件注释:(gt:大于不包含,gte:大于包含,lt:小于不包含,lte:小于包含)

IE7:设置其min-height:0

haslayout 问题引起的常见 bug

一、

IE6 及更低版本的双空白边浮动 bug

bug 修复: display:inline;

二、

IE5-6/win 的 3 像素偏移 bug

bug 修复: _height:1%;

三、

IE6 的躲躲猫(peek-a-boo) bug

bug 修复: _height:1%;

四、

IE6/7负margin隐藏Bug：

bug 修复:去掉父元素的hasLayout；

或者赋hasLayout给子元素,并添加position:relative;