BFC外边距穿透

BFC外边距穿透

1、首先什么是BFC呢？

在解释 BFC 是什么之前，需要先介绍 Box、Formatting（格式化） Context（上下文）==块级格式化上下文 的概念。 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

2、BFC布局规则：

一、内部的Box会在垂直方向，一个接一个地放置。

二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

三、每个元素的margin box的左边， 与包含块border box的左边相接触

四、BFC的区域不会与float box重叠。

五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

六、计算BFC的高度时，浮动元素也参与计算

3、产生BFC条件：

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

二、绝对定位元素，position(relative,absolute,fixed);

三、display 为以下其中之一的值 inline-blocks，table-cells，table-captions；

四、overflow 除了 visible 以外的值（hidden，auto，scroll）。

4、常见的：

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


二、BFC 会阻止外边距折叠：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。

5、清除BFC

一.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
二.使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

三.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值 设为”.”，但我发现为空亦是可以的。