css之BFC(block formmatting context)[格式化上下文]

 

一、定义:
BFC就是一个黑盒子,可以保证盒子内部元素不管如何变化,都不会影响盒子附近的元素;它属于普通流、浮动、定位方案中的普通流。

二、触发条件:
1.body;
2.float(不包含none),position(不包含static);
3.display 为 inline-block、table-cells、flex
4.overflow(不包含visible)

三、BFC特性以及其应用:
1.同一个BFC盒子下面的2个元素的下外边距会发生折叠;
2.BFC元素可以包含浮动元素;
3.BFC可以阻止被浮动元素覆盖;(可以用这个实现2列自适应布局)

内容提取来源:https://zhuanlan.zhihu.com/p/25321647

 

posted @ 2018-02-22 17:05  DaivdAndLemon  阅读(117)  评论(0编辑  收藏  举报