BFC 块级格式化上下文

BFC来由

理论来讲，包裹在父元素里的元素，不会影响父元素旁边的元素，但实际上并不总是如此，那有没有什么办法可以让里面的元素与外部真正隔离开来呢？可以试试BFC。

BFC是什么

BFC Block Formating Context 块级格式化上下文，是一个独立渲染区域，主要是隔离保护作用。也就是说BFC会形成一个完全独立的空间，让空间里的子元素不会影响到外面的布局，

W3C官方解释 BFC决定元素如何对其内容进行定位，以及元素与其他元素的关系和相互作用。当涉及到可视化布局时，BFC提供了一个环境，HTML元素在环境中按照一定规则进行布局。

BFC作用/可解决什么问题

常用于

1.清除浮动：解决浮动元素令父元素高度塌陷问题
2.解决两栏自适应布局问题
3.解决外边距塌陷/重合问题
4.解决元素被浮动元素覆盖问题

常见的创建(触发)BFC方式

为元素设置一些CSS属性就能触发创建BFC这一空间。

1.position: absolute|fixed 绝对和固定定位都脱标
2.float: 不是none 浮动元素本身就是BFC
3.overflow: 不是visible
4.display: flow-root | inline-block | flex | table-cell等table-xx
5.根元素<html> 实际上根元素也是BFC

ps. 注意display：table不能触发BFC，混淆原因是Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC

补充：其他触发方式

1.display:inline-flex|grid|inline-grid
2.多列容器：元素的column或column-width不为auto,包括column-count为1
3.contain:值为layout|content|paint

BFC应用场景

1.广告

很多网页有广告部分，也提供用户关闭按钮，这样的广告一般用BFC创建的。主要是因为点击关闭之后不能影响网页的布局，这样的广告经常设置position:absolute,这样就可以给广告设置任意的定位(绝对定位脱标)，这就是BFC。不过这样的广告，滚动到下面就会看不到内容了，可以用另一种创建BFC方式：就是设置position:fixed。滚动以后广告依旧可见，这样的单独的区域就是BFC。

2.清除浮动: 解决浮动元素令父元素高度塌陷

一个父元素和几个子元素，这几个子元素都设置浮动，会产生父元素高度坍塌问题。这是因为浮动的子元素脱离了文档流，被提起来形成新的队列，这些被提来的队列无法触及父元素，父元素也无法检测到他们的存在而无法被撑开，看起来就是父元素高度坍塌。父元素后面的布局也会乱掉

这时可以给父元素设置CSS属性(常用display和overflow)来创建BFC，将子元素隔离在父元素内。BFC容器里的元素绝对不会影响到外面的元素，为了保证这一规则，触发了BFC的父元素计算高度时，不得不让子元素参与进来进来，变相实现清除内部浮动目的。

以上是变相清除浮动的方法，但有的时候出于布局需要，无法给父元素设置这些css属性，解决父元素高度坍塌问题，可以用以下方法

(1)将父元素也浮动起来，让父元素自适应子元素高度
- 优点：代码量少
- 缺点：这是将错就错的方法，会影响父元素后面的元素布局
(2)给父元素添加固定高度，但这方法只适用于已知子元素高度的情况
- 优点：没有学习成本
- 缺点：不灵活、难以维护
(3)在浮动的子元素后面，增加一个空元素，并给这元素设置clear:both来清除浮动
- 优点：简单易懂，容易掌握
- 缺点：会增加无意义的标签，不利于以后维护
(4)为浮动的最后一个子元素设置伪元素::after{clear:both} 这个方法原理同(3)，不过适用伪类替代空元素
- 优点：结构语义完全正确
- 缺点：复用不当会导致代码量增加

父元素高度塌陷补充案例2

图片文字上下布局方式常见，但是很占垂直方向位置，如果让文字包围图片，很常见的做法就是 BFC 块级格式化上下文(较完善版) 设置float:left(这也是float设计之初的用法)。如果此时实现两栏布局，那么就给文字和图片都添加浮动，这时可能会出现父元素高度塌陷问题，背景区域消失，因为文字和图片都浮动起来，脱离了正常的文档流，浮动的元素隔离起来外界无法干扰它们，父元素也无法检测到它们的存在，也就发生父元素高度塌陷。实际上浮动元素本身就是BFC。

要解决父元素高度塌陷问题，实现两栏布局，就要借助BFC来设置隔离区域，把里面的内容隔离起来防止外面元素进来，来解决浮动带来的父元素高度塌陷问题，也就是清除浮动。

做法：父元素设置overflow触发BFC，overflow的值只要不是visible都可以触发BFC，可以是overflow:auto|hidden|scroll|flow-root，官方推荐display:flow-root。但是如果整个区域是有设置宽高的，就要小心使用hidden因为可能会隐藏部分内容。 ps：如果这样依然没有实现两栏布局，那可能是文字没有设置宽度，设置宽度使得文字和图片刚好可以放一行。

display:flow-root参考这里

3.解决自适应布局问题

实现两栏布局自适应的效果

一般需要左侧边栏定宽，右侧主体随页面宽度自适应变化，利用块级元素的特性以及浮动实现。

利用块级元素尽可能占满一行的特性，使得右边的元素随着页面的宽度变化而变化。又利用浮动的特性，让左侧元素覆盖在右边元素的上方，同时挤开下方元素的内容，让页面看起来像两栏布局的效果。

但随着右边文字的增加，超出了左边元素的高度之后，文字就会流到最左侧，看起来就是文字环绕左侧元素，这显然不是我们希望的效果

因此这里为右侧触发BFC，触发了BFC的容器，就是页面上一个完全隔离开来的容器，容器中的子元素不会影响到外边的布局，为了保证这一规则，触发BFC的右侧元素将内部元素和左侧浮动元素隔离开来，不得不形成这样左右完全隔离的两栏。同时如果右侧元素依旧是块级元素，那么它尽可能占满一行的特性还在，这样就保证右侧元素自适用。

其他实现自适应方法

模型还是两元素，左边元素定宽(假设宽为200px)

(1)左边元素左浮动，右边设置margin-left:200px;
(2)左边设置绝对定位，右边设置margin-left:200px;
- 左边得定一个位置：可以左上下线为0，右线不设置
(3)右侧元素设置顶线和右线为0(top right),左线200px,盒子宽度100%

4.解决外边距塌陷(外边距重合)

外边距塌陷又叫外边距重合。

比如一个背景区域，里面有一张图片，我们希望图片离背景区域有一点距离而不是与背景区域对齐，于是给里面的图片添加margin:top,但是意外的是，整个外边距都往外移动，图片与背景区域仍然对齐，这就是外边距塌陷。背景区域与图片的外边距重合，所以设置图片的外边距，整个背景区域生效，即使设置背景区域小一些的外边距依然无效。这时就需要把图片区域通过BFC隔离开来，给图片设置inline-block创建BFC。

还有一种情况，兄弟元素之间的外边距，在垂直方向会取最大值而不是取和,如果两个边距相等则取其一

比如定义两个div，并给两个div分别设置100px的外边距，理论上应该得到两个div，上下间距为200px,但实际上两个div上下间距只有100px,这不是bug，而是一种规范，也就是发生外边距重叠。

解决：将两个div放在两个不同的BFC中或将其中一个div触发BFC，那么这两个BFC的内容不会相互干扰。

其他解决方案

用padding来代替margin
- 优点：简单易懂
- 缺点：如果本来设计就需要设置padding,就无法代替。

5.阻止元素被浮动元素覆盖

比如定义两个div，其中一个设置浮动，会看到浮动元素覆盖了没有添加浮动的元素，如果想要避免覆盖，可以给正常元素触发BFC，这样两个元素就不会互相干扰

BFC 约束规则/布局规则

BFC是一块渲染区域，那这块渲染区域到底在哪，占据多大面积，这些由生成BFC的子元素决定。

1.三种定位方案中，BFC属于普通流(但不与普通流同一层)，BFC子元素会一个接一个布局，不会重叠。
2.属于同一个BFC的两相邻Box的margin会发生重叠，与方向无关
3.左向右布局时，每个元素的左外边距与包含块的左边界相接触
- 也就是说 BFC中子元素不会超出他的包含块
- 但position为absolute的元素可以超出他的包含块边界
4.BFC的区域不会与float的元素区域重叠
- 因为浮动元素本身就是BFC
5.计算BFC的高度时，浮动子元素也参与计算

BFC总结

触发BFC的属性有很多但选择慎重，要考虑实际情况，避免影响其他元素布局。

参考资料 123

欢迎分享与交流，全文转载就不必啦！