                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之float浮动

BFC是什么？是怎么设置的？

看视频里面老师说到BFC，就是加了一句 zoom:1;就是BFC写法吗？
那
.clearfix{
clear:both;
zoom:1;
}

这就是BFC清除浮动写法吗？

慕粉昵称已占用

2017-01-23

源自：CSS深入理解之float浮动 7-5

关注问题我要回答

2451

操作

收起

1 回答

慕尘roz
2017-01-24

zoom:1能够触发haslayout特性，用于兼容IE6/7的清除浮动。但绝大多数现代浏览器不兼容。

以下是老师课程中关于清除浮动的总结，希望对你有帮助：

清除浮动的两种基本方法：1、在高度塌陷的父元素底部插入具有clear:both声明的元素，比如在html中插入一个多余的块级元素div，或者插入不兼容IE6/7的CSS伪元素after。这种方法与外界有接触，可能导致顶部margin重叠。2、触发BFC/haslayout这两种特性。与外界隔绝，没有margin重叠问题。

BFC，Block formatting context是高级浏览器特有的概念，具有包裹性。不能应用于所有场景。

haslayout是IE6/7私有的概念。

下面是部分能够触发这两种特性的属性： float:left/right、position:absolute/fixed、overflow:hidden/scroll (IE7+)、display:inline-block/table-cell(IE8+)、width/height/zoom:1/… (IE6/IE7)。

权衡以上问题后的清除浮动策略：

.clearfix:after { content: ''; display: block; height: 0; overflow: hidden; clear: both; }--使用CSS伪元素after，插入一个内容为空、高度为0的块级元素来clear，并且用overflow的hidden触发了BFC。

.clearfix { *zoom: 1; }--兼容IE6/7的写法，触发haslayout。