为什么会有BFC？
BFC是什么？
如何触发BFC？
BFC可以解决什么问题？
这些问题还有其他解决方案吗
动画视频：
文字解析：
前端程序员在布局时
经常会遇到各种烦人的问题
比如
明明说好了每个元素都是一个打包盒
那在打包盒外的元素，应该不会受到打包盒内的元素影响
可是事实上是这样的吗
小冻冻 这一块高度没有了
小冻冻 这个两栏布局没有自适应
小冻冻 这些元素之间的垂直距离好像不太对
从理论上来讲
被包含在父元素里的元素是不会影响到父元素旁边的元素
但实际上却并不总是如此
那么有没有什么办法能让里面的元素和外部真正隔离开来呢
也许你可以试试BFC
BFC block formatting context
可以直译为“块级格式化上下文”
官方大致是这样解释的
它决定了元素如何对其内容进行定位
以及与其他元素的关系和相互作用
当涉及到可视化布局的时候
Block Formatting Context提供了一个环境
HTML元素在这个环境中按照一定规则进行布局
但其实我们只需要记住
BFC的目的就是
形成一个完全独立的空间
让空间里的子元素不会影响到外面的布局
如何才能形成这样一个神奇的空间呢
我们通过为元素设置一些CSS属性
就能触发这一空间
而最最最常用的触发规则有四种
在知道触发规则之后
应该怎么运用它
又能解决什么问题呢
第一种 解决浮动元素令父元素高度塌陷的问题
假设页面里有一个父元素和几个子元素
这几个子元素都设为浮动时
会产生一种神奇的现象
父元素高度塌陷
这是因为浮动的子元素脱离了文档流
被提起来形成新的VIP队列
下方普通队列中的元素无法触及它
父元素检测不到它的存在无法被它撑开
看起来就是父元素高度塌陷了
后面的布局也会乱掉
这时就可以给父元素添加属性{overflow: hidden;}
当然这只是一种做法
你还可以添加属性{display: table-cell;}
或者是{display: block;}
或者是{position: fixed;}
或者是{position: absolute;}等等
触发了BFC的容器就是页面上的一个完全隔离开的容器
容器里的子元素绝对不会影响到外面的元素
为了保证这个规则
触发了BFC的父元素在计算高度时不得不让浮动的子元素也参与进来
变相地实现了清除内部浮动的目的
但有的时候出于布局需要也可能无法给父元素设置这些属性
而解决高度塌陷
常用的还有以下这些办法
1.让父元素也浮动起来
这样父元素和子元素一起脱离文档流
这样父元素就能自适应子元素的高度
优点是代码量极少
缺点是这是一种将错就错的办法
会直接影响父元素之后的元素排列引发其他问题
2.给父元素添加一个固定高度
但这个方法只适用于已知子元素高度的情况
优点是没有学习成本
缺点是不灵活
也难以维护
3.在浮动的子元素后面增加一个空元素
设置{clear: both}来清除浮动
优点是简单易懂容易掌握
缺点是会增加无意义的标签
不利于以后维护
4.为浮动的最后一个子元素设置伪元素
after{clear: both}
这个办法和前一个是同样的原理
只不过这里用伪类替代了空元素
优点是结构和语义完全正确
缺点是复用不当会导致代码量增加
至于到底该选用哪种办法
那还得根据实际需求来决定了
第二种 解决自适应布局的问题
PC端的网页，像这样的两栏布局非常常见
一般需要左侧边栏定宽
右侧主体随页面宽度自适应变化
通常是用浮动来实现的
它利用了块级元素会尽可能占满一行的特性
使得右边的元素可以随着页面宽度变化而变化
又利用了浮动的特性
让左侧元素覆盖在右边元素的上方
同时还能挤开下方元素里的内容
让页面看起来是两栏的效果
但随着右边元素里文字增加
超出了左边元素的高度之后
文字就会流动到最左侧
看起来就是文字环绕左侧元素
这显然不是我们希望的效果
因此这里为右侧元素触发BFC
触发了BFC的容器就是页面上的一个完全隔离开的容器
容器里的子元素绝对不会影响到外面的元素
为了保证这个规则
触发了BFC的右侧元素为了将内部元素和左侧浮动元素隔离开来
不得不形成这样左右完全隔离的两栏
同时如果右侧元素依旧是块级元素
那么他尽可能占满一行的特性还在
这样就保证了右侧元素依旧是自适应的
当然我们还有其他的办法可以做这样左侧固定，右侧自适应的布局
1左边左浮动 右边设置{margin-left: 200px}
2.左边绝对定位 右边设置{margin-left: 200px}
3.右侧元素设置顶线和右线的位置为0 左线的位置为200像素 宽度100%
这些方法相差并不是很大，可以根据自己的喜好选择性地使用
第三种 解决外边距垂直方向重合问题
还记得我们上一节里介绍过的外边距垂直方向重合吗
也就是兄弟元素之间的外边距在垂直方向上会取最大值而不是取和
相邻的两个p元素都设置了margin为20像素
本来期望它们在垂直方向上的距离相加起来应该是40像素
但实际上只有20像素
那么我们可以通过触发BFC来防止它们之间相互影响
比如为其中一个p元素的外面包裹一层父元素
并且触发父元素BFC比如{overflow: hidden}
这样打破原有格局 ，就不再会重叠啦
同样的，我们还有另外一个解决方案
用padding来替代margin
优点是简单易懂
缺点是如果根据设计本来就需要设置padding样式，那就没办法用了
可见通过触发BFC我们能解决几个非常常见的问题
1浮动元素的父元素高度塌陷
2.两栏自适应布局
3.外边距垂直方向重合
怎么样是不是很简单？
赶紧上手写点代码练习一下吧~
更多内容，欢迎加大师姐微信：it_xzy
入群了解课程动态、幕后花絮，还有机会参与到课程制作，成为联合制作人哟
