BFC。。

目录

一、什么是BFC

BFC的理解

从一个现象开始说起

二、 形成 BFC 的条件(如何创建BFC)

方法①:

方法②:

方法③:

方法④:

最佳方法

三、BFC常见作用

1、包含浮动元素

2、不被浮动元素覆盖

3、 BFC 会阻止外边距折叠

---

一、什么是BFC

BFC的理解

块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。 也就是说，如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。（在 CSS3 中，BFC 叫做 Flow Root）

从一个现象开始说起

一个盒子不设置height，当内容子元素都浮动时，无法撑起自身

这个盒子没有形成BFC

二、 形成 BFC 的条件(如何创建BFC)

方法①:

浮动元素，float 除 none 以外的值

方法②:

position的值不是static或者relative,即绝对定位元素，position（absolute，fixed）；

方法③:

display的值是inline-block、flex或者inline-flex

方法④:

overflow: hidden;overflow 除了 visible 以外的值其实都可以（hidden，auto，scroll）

最佳方法

overflow:hiddlen y 设置为inline-block可能会让一个块级元素变成行内元素，与其他相邻行内元素位于同一行，从而影响页面布局

三、BFC常见作用

1、包含浮动元素

问题案例：高度塌陷问题：在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合。这时就可以用bfc来清除浮动了。

2、不被浮动元素覆盖

问题案例： div浮动兄弟遮盖问题：由于son元素设置了浮动，会脱离文档流，遮挡未发生浮动的son-last元素。

 给son-last设置overflow:hidden

3、 BFC 会阻止外边距折叠

问题案例：margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决。

无法实现子元素距离父元素上方 20px

  给父元素设置overflow:hidden