参考：理解CSS布局和BFC
CSS深入理解流体特性和BFC特性下多栏自适应布局
1、概念
BFC(Block Formatting Context)：块级格式化上下文。
BFC元素特性的表现原则就是：无论内部元素处于什么状态，都不影响外部元素。
当盒子里的某一个元素设置为浮动时，盒子元素的高度可能会低于浮动元素的高度。可以将BFC看作页面中的一个迷你布局。一旦创建，它其中的所有元素都被包裹，盒子不会因为内部元素浮动而坍塌。
2、触发情况
(1) float的值不为none;
(2) overflow的值为auto, scroll, 或hidden;
(3) display的值为table-cell， table-caption, 或者inline-block;
(4) display:flow-root; （兼容性不高）
(5) position不为relative和static。
3、优点
(1) 自适应内容由于封闭，更健壮，容错性强。比方说，内部clear:both不会与兄弟float产生矛盾。而纯流体布局，clear:both会让后面内容无法和float元素在一个水平上，产生布局问题;
(2) 自适应内容自动填满浮动以为区域，无需关心浮动元素宽度，可以整站大规模应用。而纯流体布局，需要大小不确定的margin/padding等值撑开合适间距，无法CSS组件化。
4、一些缺陷
(1) float:left 浮动元素本身BFC化，然而浮动元素有破坏性和包裹性，失去了元素本身的流体自适应性，因此，无法用来实现自动填满容器的自适应布局；
(2) position: absolute; 脱离文档流；
(3) display:table-cell 让元素表现得像单元格一样，IE8+以上浏览器才支持。
5、自适应布局可用方法：
(1) overflow:auto/hidden IE7+
(2) display:inline-block IE6/IE7
(3) display:table-cell IE8+
6、BFC一些有用的功能
(1) 阻止外边距叠加
(2) 停止去围绕浮动元素
网友评论