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)，不过适用伪类替代空元素- 优点：结构语义完全正确
- 缺点：复用不当会导致代码量增加
3.解决自适应布局问题
实现两栏布局自适应的效果
一般需要左侧边栏定宽，右侧主体随页面宽度自适应变化，利用块级元素的特性以及浮动实现。
利用块级元素尽可能占满一行的特性，使得右边的元素随着页面的宽度变化而变化。又利用浮动的特性，让左侧元素覆盖在右边元素的上方，同时挤开下方元素的内容，让页面看起来像两栏布局的效果。
但随着右边文字的增加，超出了左边元素的高度之后，文字就会流到最左侧，看起来就是文字环绕左侧元素，这显然不是我们希望的效果
因此这里为右侧触发BFC，触发了BFC的容器，就是页面上一个完全隔离开来的容器，容器中的子元素不会影响到外边的布局，为了保证这一规则，触发BFC的右侧元素将内部元素和左侧浮动元素隔离开来，不得不形成这样左右完全隔离的两栏。同时如果右侧元素依旧是块级元素，那么它尽可能占满一行的特性还在，这样就保证右侧元素自适用。
其他实现自适应方法
模型还是两元素，左边元素定宽(假设宽为200px)
- (1)左边元素左浮动，右边设置margin-left:200px;
- (2)左边设置绝对定位，右边设置margin-left:200px;
- 左边得定一个位置：可以左上下线为0，右线不设置
- (3)右侧元素设置顶线和右线为0(top right),左线200px,盒子宽度100%
4.解决外边距塌陷(外边距重合)
外边距塌陷又叫外边距重合。
兄弟元素之间的外边距，在垂直方向会取最大值而不是取和,如果两个边距相等则取其一
解决：将两个div放在两个不同的BFC中或将其中一个div触发BFC，那么这两个BFC的内容不会相互干扰。
其他解决方案
- 用padding来代替margin
- 优点：简单易懂
- 缺点：如果本来设计就需要设置padding,就无法代替。
5.阻止元素被浮动元素覆盖
给正常元素触发BFC，这样两个元素就不会互相干扰。
BFC 约束规则/布局规则
BFC是一块渲染区域，那这块渲染区域到底在哪，占据多大面积，这些由生成BFC的子元素决定。
- 1.三种定位方案中，BFC属于普通流，BFC子元素会
一个接一个布局，不会重叠。 - 2.
属于同一个BFC的两相邻Box的margin会发生重叠，与方向无关 - 3.左向右布局时，每个元素的
左外边距与包含块的左边界相接触- 也就是说 BFC中子元素不会超出他的包含块
- 但position为absolute的元素可以超出他的包含块边界
- 4.BFC的区域不会与float的元素区域重叠
- 因为浮动元素本身就是BFC
- 5.计算BFC的高度时，浮动子元素也参与计算
BFC总结
触发BFC的属性有很多但选择慎重，要考虑实际情况，避免影响其他元素布局。
欢迎分享与交流，全文转载就不必啦！
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
