前端基础：BFC

一、概念

BFC：Block formatting context 块级格式化上下文；

形成独立的渲染区域

内部元素的渲染不会影响外界

形成 BFC 的常见条件：

1. 浮动元素：  float 不是 none；
2. 绝对定位元素   position 是 absolute 或者  fixed；
3. 块级元素 overflow 不是 visible；
4. flex元素；
5. inline-block元素

应用场景：

清除浮动  等。

二、例子

 

是因为图片img左浮动了，脱离了文档流。

所以，container的高度是由P标签的高度决定的，如果我们希望container高度由这个img标签来决定。 

我们可以这么做，我们在CSS文件中定义一个.bfc的类，找到一个行程BFC的条件，比如：overflow:hidden;

为啥这么做高度就正常了呢。因为container这个div加了一个overflow: hidden;

这就是说：

container这个div会 “形成独立的渲染区域，内部元素的渲染不会影响外界”，img就是内部元素啊，保证img渲染不会影响到外部。按照img高度渲染整个container的高度。不然img就超过container的高度了，不符合BFC的逻辑。

虽然img标签，float浮动了，但container依旧会把这个浮动的元素算进去，保证它不出格，得到最终的高度。

但是，也有问题，虽然看着没问题，实际上是有问题的，p占据了img的位置，这不是我们想要的结果，我们不想让P占据img的位置。

 怎么解决呢？我们再次使用BFC的功能，将P标签也加上.bfc的类。那么p也形成了BFC：p形成独立的渲染区域，p不能侵占了img，只能在自己的区域渲染。

复习知识

复习一下常见的定位方案

第一：普通流（默认）

 第二：浮动

第三、绝对定位

 

而BFC属于普通流。

BFC可以看做是元素的一种属性，当元素有了BFC属性，元素就可以看做是隔离了的独立容器。

容器里面的元素不会在布局上影响到外面的元素。

 如何触发BFC？

BFC的特性和应用

1、BFC可以避免外边距重叠

 

这是规范，不是bug：

块的上外边距margin-top和下外边距 margin-bottom会合并为单个边距，其大小为单个边距的最大值，这就是外边距重叠现象。

如何解决呢 ？

只要将两个div放在不同的BFC中。那么两个BFC的内容不会互相干扰。

 2、BFC第二个作用，清除浮动。

两个div，父子关系，子元素设置float为left。

但是，事与愿违。

 

子div是浮动的，脱离了文档流。

我们可以通过overflow属性触发父容器的BFC，那么父容器会包裹这子元素，从而达到了清除浮动的目的。

 

 

三、阻挡元素被浮动元素覆盖 

阻止元素被浮动元素覆盖

 如果想要避免被覆盖，可以触发正常元素的BFC属性。

所以，在下面正常元素加了overflow属性，这样两个属性就不会互相干扰。