BFC块级格式化上下文

       BFC是英文Block formatting contexts,这个概念最开始出现在CSS2.1，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作，中文翻译过来是“块级格式化上下文”。下面这句话是W3help有关BFC的解释。

       在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 'margin' 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠（collapse）。

　　本人在网上大致的找了找触发BFC的条件：

1. "float"的值不是"none"
2. "overflow"的值不是"visible"
3. "display"的值是"table-cell"
4. "table-caption",或"inline-block"
5. "position"的值既不是"static"也不是"relative"

　　当我们在编写网页的时候有时候可能会遇到这样的问题；

　　当2个div嵌套的时候如下图：

　　

　　它们的样式：

　　

　　上述代码块运行结果如下：

　　

　　我们有时候往往希望内部的div居于外部div的中心，调整一个元素的位置，第一个可以用绝对定位，第二个可以用相对定位，还有就是固定定位。一般我们首先想到的就是调内部div的margin，top和left。margin-top:50px;margin-left:50px;这2句代码能不能实现我们所期望的，下面是演示结果：

结果为什么外部div也会受到内部div的margin的影响呢？

最初，外层div的overflow属性为visible；可见，当我们去设置内部div的margin-top的时候，他没有触发BFC块级格式化上下文，所以看到的结果就是上面这种情况。

那么解决这个问题的方法

第一：给外部div的overflow属性设置成hidden，

第二：给外部div加上border

第三：给外部div的float属性设置成left；或者给内部div的float属性设置成left

第四：给外部div的display属性设置成table-cell;

第五：position设置为absolute

 

转载于:https://www.cnblogs.com/yiyuanqian/p/3935477.html