[CSS篇]浅谈BFC

概述

说到BFC，其实刚开始我也很迷，翻看了一些文档后打算来总结一下，首先，BFC其实就是一种布局，说到CSS布局，大抵也就是普通流、浮动（元素会脱离普通流）、定位（元素会脱离普通流），BFC也属于普通流，加了BFC样式的元素像是给元素加了个结界，结界内部的元素不会影响外面的元素，被隔离开了。

BFC规则

• BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列；
• BFC样式的元素像是给元素加了个结界，结界内部的元素不会影响外面的元素，被隔离开了；
• 垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠；
• 计算BFC的高度时，浮动元素也参与计算；
• BFC布局是可以通过一些条件触发的，从而实现布局上的需求或解决一些问题；
• BFC就是一个工具，知道其是什么且怎么用就好；
• BFC可以看做是一个CSS元素属性

BFC触发条件

• 根元素（）
• float值非none，即left，right）
• overflow值非visible即hidden，auto，scroll
• display值为inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex、inline-grid、inline-flex。
• position值为absolute、fixed

注意：
1、并不是所有元素都是BFC，只有满足了BFC的条件后，此元素才成为了1个BFC。
2、一个BFC区域，只包含其所有子元素，不包含子元素的子元素，举个例子，爷爷只养儿子不养孙子，孙子是儿子负责。

举个例子：


    
    
    
      hello
      world!

上述代码，body元素算1个BFC，其子元素为test1,test2，但不包括test2里的两个h1标签，此时test2也不是BFC，因为不满足任何BFC条件。
要想test2成为一个BFC，给其设置为上述的任何一个条件即可


  
    
    
    
    Document
    
  
  
    
    
    
      hello
      world!

BFC的应用场景

1、属于同一个BFC的两个相邻容器的上下margin会重叠

效果图：

如图所示绿色盒子的上边距是60px，红色盒子的下边距是40px，会选取最大的60px。这种现象叫做margin塌陷。
原因：因为此时红盒子和绿盒子属于同一个BFC，也就是根元素（），BFC的特性1规定“属于同一个BFC的两个相邻容器的上下margin会重叠，故两者上下边距发生重叠”

解决方案：
分离两个盒子，使它们处于不同的BFC就互不干涉了，给绿盒子加个div，其式样为overflow:hidden，分离BFC后就可以解决 margin重叠的问题了。

2、计算BFC高度时浮动元素也参与计算

我们先看下正常情况，有两个盒子（div）=》outside为父元素，inside为子元素。父元素的样式设置了边框，目的想包裹住子元素。
效果图：

下面我们把子元素设置浮动，脱离文档流。float:left;

效果图：

子元素设置了浮动，脱离了文档流，所以造成上图现象。
原因：父元素没有设置高度且子元素设置浮动的时候，父元素就会出现高度塌陷。
来我们看下给父元素设置高度是什么效果。

解决方案：
要么给父元素添加高度，要么给父元素样式添加overflow:hidden。

原因：给父元素添加样式overflow：hidden。父元素触发了BFC，BFC特性规定计算BFC高度时浮动元素也参与计算，这里子元素设置了浮动，因为BFC所以其高度仍计算到父元素内，从而解决了高度塌陷的问题。

3、BFC的区域不会与浮动容器发生重叠
两个相关的盒子，盒子1设置了左浮动，脱离了文档流，所以不会自适应两栏。两个盒子发生了重叠。

效果图：

解决方案：
给右侧元素设置样式overflow:hidden，使得右侧元素触发BFC，BFC特性规定：BFC的区域不会与浮动容器发生重叠，触发BFC解决重叠问题，实现自适应两栏效果。

效果图：

4、BFC内的容器在垂直方向依次排列
类似正常情况下块元素在垂直方向上依次排列，较易理解。
5、BFC是独立容器，容器内部元素不会影响容器外部元素
（解决包含塌陷）

效果图：

原因：
父元素也跟着子元素的margin-top下移了50px；
解决方案：
设置父元素为一个BFC区域

效果图：

7、使用BFC实现左侧盒子定宽，右侧盒子自适应布局
左侧设置为浮动，右侧也设置为浮动，右侧的宽度计算为100%-左侧

不加BFC的效果图：

加了BFC的效果图：

补充知识点：

使用display属性能够将三者任意转换：
　　 (1)display:inline;转换为行内元素
　　(2)display:block;转换为块状元素
　　 (3)display:inline-block;转换为行内块状元素

① 行内元素：

(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行

② 块状元素：

(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下

③行内块状元素特征：

(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右

使用display属性能够将三者任意转换：

(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素

参考文章：https://www.itcast.cn/news/20...
https://blog.csdn.net/leelxp/...